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

格式修复，增加收藏页面

Browse Source
This commit is contained in:
kjqwer
2025-08-25 07:45:43 +08:00
parent 4d8f11e5cd
commit 67333b5f01
18 changed files with 632 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/views/ArtistView.vue
+1 -2
View File
@@ -126,8 +126,7 @@ import artistService from '@/services/artist';
import downloadService from '@/services/download';
import { getImageProxyUrl } from '@/services/api';
import type { Artist, Artwork } from '@/types';
import LoadingSpinner from '@/components/common/LoadingSpinner.vue';
import ErrorMessage from '@/components/common/ErrorMessage.vue';
import ArtworkCard from '@/components/artwork/ArtworkCard.vue';
const route = useRoute();
ui/src/views/ArtistsView.vue
+1 -2
View File
@@ -135,8 +135,7 @@ 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();
ui/src/views/ArtworkView.vue
+38 -5
View File
@@ -9,6 +9,11 @@
<ErrorMessage :error="error" @dismiss="clearError" />
</div>
<!-- 收藏错误提示 -->
<div v-if="bookmarkError" class="error-section">
<ErrorMessage :error="bookmarkError" title="警告" type="warning" dismissible @dismiss="clearBookmarkError" />
</div>
<div v-else-if="artwork" class="artwork-content">
<!-- 作品图片 -->
<div class="artwork-gallery">
@@ -167,8 +172,7 @@ import downloadService from '@/services/download';
import { useRepositoryStore } from '@/stores/repository';
import { getImageProxyUrl } from '@/services/api';
import type { Artwork, DownloadTask } from '@/types';
import LoadingSpinner from '@/components/common/LoadingSpinner.vue';
import ErrorMessage from '@/components/common/ErrorMessage.vue';
import DownloadProgress from '@/components/download/DownloadProgress.vue';
const route = useRoute();
@@ -191,6 +195,9 @@ const checkingDownloadStatus = ref(false);
const currentTask = ref<DownloadTask | null>(null);
const sseConnection = ref<(() => void) | null>(null);
// 收藏错误状态
const bookmarkError = ref<string | null>(null);
// 导航相关状态
const artistArtworks = ref<Artwork[]>([]);
const currentArtworkIndex = ref(-1);
@@ -404,9 +411,30 @@ const removeTask = (taskId: string) => {
};
// 收藏/取消收藏
const handleBookmark = () => {
// 这里可以添加收藏功能
console.log('收藏功能待实现');
const handleBookmark = async () => {
if (!artwork.value) return;
try {
const action = artwork.value.is_bookmarked ? 'remove' : 'add';
const response = await artworkService.toggleBookmark(artwork.value.id, action);
if (response.success && response.data) {
// 更新作品状态
artwork.value.is_bookmarked = response.data.is_bookmarked;
artwork.value.total_bookmarks += artwork.value.is_bookmarked ? 1 : -1;
// 显示成功消息
console.log(response.data.message);
} else {
// 显示错误提示给用户
bookmarkError.value = response.error || '收藏操作失败';
console.error('收藏操作失败:', response.error);
}
} catch (err) {
// 显示错误提示给用户
bookmarkError.value = '藏暂时不可用，请去官方收藏或者取消收藏';
console.error('收藏操作失败:', err);
}
};
// 格式化日期
@@ -422,6 +450,11 @@ const clearError = () => {
error.value = null;
};
// 清除收藏错误
const clearBookmarkError = () => {
bookmarkError.value = null;
};
// 获取作者作品列表用于导航
const fetchArtistArtworks = async () => {
const artistId = route.query.artistId;
ui/src/views/BookmarksView.vue
+258
View File
@@ -0,0 +1,258 @@
<template>
<div class="bookmarks-page">
<div class="container">
<div class="page-header">
<h1 class="page-title">我的收藏</h1>
<div class="page-actions">
<select v-model="selectedType" @change="handleTypeChange" class="type-select">
<option value="all">全部类型</option>
<option value="illust">插画</option>
<option value="manga">漫画</option>
<option value="novel">小说</option>
</select>
</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="artworks.length === 0" class="empty-section">
<div class="empty-content">
<svg viewBox="0 0 24 24" fill="currentColor" class="empty-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" />
</svg>
<h3>暂无收藏作品</h3>
<p>你还没有收藏任何作品</p>
<router-link to="/search" class="btn btn-primary">
去搜索作品
</router-link>
</div>
</div>
<div v-else class="artworks-grid">
<div v-for="artwork in artworks" :key="artwork.id" class="artwork-card-wrapper">
<ArtworkCard :artwork="artwork" @click="handleArtworkClick" />
</div>
</div>
<!-- 加载更多 -->
<div v-if="hasMore && !loading" class="load-more">
<button @click="loadMore" class="btn btn-secondary">
加载更多
</button>
</div>
<div v-if="loadingMore" class="loading-more">
<LoadingSpinner text="加载更多..." />
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { artworkService } from '@/services/artwork';
import { getImageProxyUrl } from '@/services/api';
import type { Artwork } from '@/types';
import ArtworkCard from '@/components/artwork/ArtworkCard.vue';
const router = useRouter();
// 响应式数据
const artworks = ref<(Artwork & { loaded?: boolean; error?: boolean })[]>([]);
const loading = ref(false);
const loadingMore = ref(false);
const error = ref<string | null>(null);
const selectedType = ref('all');
const offset = ref(0);
const limit = 30;
const hasMore = ref(true);
// 计算属性
const getImageUrl = getImageProxyUrl;
// 获取收藏列表
const fetchBookmarks = async (isLoadMore = false) => {
try {
if (isLoadMore) {
loadingMore.value = true;
} else {
loading.value = true;
error.value = null;
}
const response = await artworkService.getBookmarks({
type: selectedType.value === 'all' ? undefined : selectedType.value,
offset: isLoadMore ? offset.value : 0,
limit
});
if (response.success && response.data) {
const newArtworks = response.data.artworks.map(artwork => ({
...artwork,
loaded: false,
error: false
}));
if (isLoadMore) {
artworks.value.push(...newArtworks);
} else {
artworks.value = newArtworks;
}
offset.value = isLoadMore ? offset.value + limit : limit;
hasMore.value = !!response.data.next_url;
} else {
error.value = response.error || '获取收藏列表失败';
}
} catch (err) {
error.value = err instanceof Error ? err.message : '获取收藏列表失败';
console.error('获取收藏列表失败:', err);
} finally {
loading.value = false;
loadingMore.value = false;
}
};
// 类型切换
const handleTypeChange = () => {
offset.value = 0;
hasMore.value = true;
fetchBookmarks();
};
// 加载更多
const loadMore = () => {
if (!loadingMore.value && hasMore.value) {
fetchBookmarks(true);
}
};
// 处理作品点击
const handleArtworkClick = (artwork: Artwork) => {
router.push(`/artwork/${artwork.id}`);
};
// 清除错误
const clearError = () => {
error.value = null;
};
// 页面加载时获取数据
onMounted(() => {
fetchBookmarks();
});
</script>
<style scoped>
.bookmarks-page {
padding: 2rem 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.page-title {
font-size: 2rem;
font-weight: 700;
color: #1f2937;
margin: 0;
}
.page-actions {
display: flex;
gap: 1rem;
}
.type-select {
padding: 0.5rem 1rem;
border: 1px solid #d1d5db;
border-radius: 0.5rem;
background: white;
font-size: 1rem;
color: #374151;
}
.loading-section,
.error-section,
.empty-section {
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
}
.empty-content {
text-align: center;
color: #6b7280;
}
.empty-icon {
width: 4rem;
height: 4rem;
margin-bottom: 1rem;
color: #d1d5db;
}
.empty-content h3 {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: #374151;
}
.empty-content p {
margin-bottom: 1.5rem;
}
.artworks-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.artwork-card-wrapper {
position: relative;
}
.load-more,
.loading-more {
display: flex;
justify-content: center;
margin-top: 2rem;
}
@media (max-width: 768px) {
.page-header {
flex-direction: column;
gap: 1rem;
align-items: stretch;
}
.artworks-grid {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1rem;
}
}
</style>
ui/src/views/DownloadsView.vue
+21 -58
View File
@@ -6,7 +6,8 @@
<div class="header-actions">
<button @click="refreshData" class="btn btn-secondary" :disabled="loading">
<svg viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
<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>
@@ -19,25 +20,13 @@
<!-- 标签页 -->
<div class="tabs">
<button
@click="activeTab = 'tasks'"
class="tab-btn"
:class="{ active: activeTab === 'tasks' }"
>
<button @click="activeTab = 'tasks'" class="tab-btn" :class="{ active: activeTab === 'tasks' }">
下载任务
</button>
<button
@click="activeTab = 'history'"
class="tab-btn"
:class="{ active: activeTab === 'history' }"
>
<button @click="activeTab = 'history'" class="tab-btn" :class="{ active: activeTab === 'history' }">
下载历史
</button>
<button
@click="activeTab = 'files'"
class="tab-btn"
:class="{ active: activeTab === 'files' }"
>
<button @click="activeTab = 'files'" class="tab-btn" :class="{ active: activeTab === 'files' }">
文件管理
</button>
</div>
@@ -51,7 +40,8 @@
<div v-else-if="tasks.length === 0" class="empty-section">
<div class="empty-content">
<svg viewBox="0 0 24 24" fill="currentColor" class="empty-icon">
<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
<path
d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z" />
</svg>
<h3>暂无下载任务</h3>
<p>开始下载作品后，任务将显示在这里</p>
@@ -59,11 +49,7 @@
</div>
<div v-else class="tasks-list">
<div
v-for="task in tasks"
:key="task.id"
class="task-card"
>
<div v-for="task in tasks" :key="task.id" class="task-card">
<div class="task-header">
<div class="task-info">
<h3 class="task-title">
@@ -74,11 +60,7 @@
</span>
</div>
<div class="task-actions">
<button
v-if="task.status === 'downloading'"
@click="cancelTask(task.id)"
class="btn btn-danger btn-sm"
>
<button v-if="task.status === 'downloading'" @click="cancelTask(task.id)" class="btn btn-danger btn-sm">
取消
</button>
</div>
@@ -86,10 +68,7 @@
<div class="task-progress">
<div class="progress-bar">
<div
class="progress-fill"
:style="{ width: `${task.progress}%` }"
></div>
<div class="progress-fill" :style="{ width: `${task.progress}%` }"></div>
</div>
<div class="progress-text">
{{ task.completed_files }}/{{ task.total_files }} ({{ task.progress }}%)
@@ -127,7 +106,8 @@
<div v-else-if="history.length === 0" class="empty-section">
<div class="empty-content">
<svg viewBox="0 0 24 24" fill="currentColor" class="empty-icon">
<path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/>
<path
d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z" />
</svg>
<h3>暂无下载历史</h3>
<p>下载完成后，历史记录将显示在这里</p>
@@ -135,11 +115,7 @@
</div>
<div v-else class="history-list">
<div
v-for="item in history"
:key="item.id"
class="history-card"
>
<div v-for="item in history" :key="item.id" class="history-card">
<div class="history-header">
<div class="history-info">
<h3 class="history-title">
@@ -150,10 +126,7 @@
</span>
</div>
<div class="history-actions">
<button
@click="openFolder(item.download_path)"
class="btn btn-text btn-sm"
>
<button @click="openFolder(item.download_path)" class="btn btn-text btn-sm">
打开文件夹
</button>
</div>
@@ -190,7 +163,8 @@
<div v-else-if="files.length === 0" class="empty-section">
<div class="empty-content">
<svg viewBox="0 0 24 24" fill="currentColor" class="empty-icon">
<path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"/>
<path
d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" />
</svg>
<h3>暂无下载文件</h3>
<p>下载完成后，文件将显示在这里</p>
@@ -198,27 +172,17 @@
</div>
<div v-else class="files-list">
<div
v-for="file in files"
:key="`${file.artist}_${file.artwork}`"
class="file-card"
>
<div v-for="file in files" :key="`${file.artist}_${file.artwork}`" class="file-card">
<div class="file-header">
<div class="file-info">
<h3 class="file-title">{{ file.artwork }}</h3>
<p class="file-artist">{{ file.artist }}</p>
</div>
<div class="file-actions">
<button
@click="openFolder(file.path)"
class="btn btn-text btn-sm"
>
<button @click="openFolder(file.path)" class="btn btn-text btn-sm">
打开
</button>
<button
@click="deleteFile(file.artist, file.artwork)"
class="btn btn-danger btn-sm"
>
<button @click="deleteFile(file.artist, file.artwork)" class="btn btn-danger btn-sm">
删除
</button>
</div>
@@ -250,8 +214,7 @@ import { ref, onMounted, onUnmounted } from 'vue';
import { useAuthStore } from '@/stores/auth';
import downloadService from '@/services/download';
import type { DownloadTask } from '@/types';
import LoadingSpinner from '@/components/common/LoadingSpinner.vue';
import ErrorMessage from '@/components/common/ErrorMessage.vue';
const authStore = useAuthStore();
@@ -732,4 +695,4 @@ onUnmounted(() => {
.btn-text:hover {
background: #f3f4f6;
}
</style>
</style>
ui/src/views/HomeView.vue
+37 -125
View File
@@ -19,27 +19,16 @@ onMounted(async () => {
<p class="hero-subtitle">
发现、收藏、下载你喜欢的 Pixiv 作品
</p>
<div class="hero-actions">
<router-link
v-if="!isLoggedIn"
to="/login"
class="btn btn-primary"
>
<router-link v-if="!isLoggedIn" to="/login" class="btn btn-primary">
立即登录
</router-link>
<router-link
v-else
to="/search"
class="btn btn-primary"
>
<router-link v-else to="/search" class="btn btn-primary">
开始搜索
</router-link>
<router-link
to="/downloads"
class="btn btn-secondary"
>
<router-link to="/downloads" class="btn btn-secondary">
下载管理
</router-link>
</div>
@@ -49,12 +38,13 @@ onMounted(async () => {
<div class="features-section">
<div class="container">
<h2 class="section-title">主要功能</h2>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">
<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"/>
<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>
</div>
<h3 class="feature-title">作品搜索</h3>
@@ -66,7 +56,21 @@ onMounted(async () => {
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="currentColor">
<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="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z" />
</svg>
</div>
<h3 class="feature-title">热门榜单</h3>
<p class="feature-description">
查看日榜、周榜、月榜热门作品，一键批量下载
</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="currentColor">
<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>
</div>
<h3 class="feature-title">一键下载</h3>
@@ -78,7 +82,8 @@ onMounted(async () => {
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="currentColor">
<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>
</div>
<h3 class="feature-title">作者管理</h3>
@@ -90,8 +95,9 @@ onMounted(async () => {
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/>
<path d="M7 12h2v5H7zm4-3h2v8h-2zm4-3h2v11h-2z"/>
<path
d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z" />
<path d="M7 12h2v5H7zm4-3h2v8h-2zm4-3h2v11h-2z" />
</svg>
</div>
<h3 class="feature-title">下载管理</h3>
@@ -103,7 +109,8 @@ onMounted(async () => {
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"/>
<path
d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" />
</svg>
</div>
<h3 class="feature-title">仓库管理</h3>
@@ -111,53 +118,12 @@ onMounted(async () => {
管理本地作品仓库，分类整理和快速检索
</p>
</div>
</div>
</div>
</div>
<div v-if="isLoggedIn" class="quick-actions">
<div class="container">
<h2 class="section-title">快速操作</h2>
<div class="quick-actions-grid">
<router-link to="/search" class="quick-action-card">
<div class="quick-action-icon">
<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>
</div>
<span>搜索作品</span>
</router-link>
<router-link to="/downloads" class="quick-action-card">
<div class="quick-action-icon">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
</svg>
</div>
<span>下载管理</span>
</router-link>
<router-link to="/artists" class="quick-action-card">
<div class="quick-action-icon">
<svg viewBox="0 0 24 24" fill="currentColor">
<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>
</div>
<span>作者管理</span>
</router-link>
<router-link to="/repository" class="quick-action-card">
<div class="quick-action-icon">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"/>
</svg>
</div>
<span>仓库管理</span>
</router-link>
</div>
</div>
</div>
</div>
</template>
@@ -302,85 +268,31 @@ onMounted(async () => {
line-height: 1.6;
}
.quick-actions {
padding: 4rem 0;
}
.quick-actions-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
max-width: 600px;
margin: 0 auto;
}
.quick-action-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 2rem;
background: white;
border-radius: 1rem;
text-decoration: none;
color: #374151;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
transition: all 0.2s;
}
.quick-action-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
color: #3b82f6;
}
.quick-action-icon {
width: 3rem;
height: 3rem;
background: #f3f4f6;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #6b7280;
transition: all 0.2s;
}
.quick-action-card:hover .quick-action-icon {
background: #3b82f6;
color: white;
}
.quick-action-icon svg {
width: 1.5rem;
height: 1.5rem;
}
@media (max-width: 768px) {
.hero-title {
font-size: 2rem;
}
.hero-subtitle {
font-size: 1rem;
}
.hero-actions {
flex-direction: column;
align-items: center;
}
.btn {
width: 100%;
max-width: 300px;
}
.features-grid {
grid-template-columns: 1fr;
}
.quick-actions-grid {
grid-template-columns: 1fr;
}
}
</style>
ui/src/views/LoginView.vue
+17 -35
View File
@@ -10,25 +10,21 @@
</div>
<div v-if="error" class="error-section">
<ErrorMessage
:error="error"
title="登录失败"
dismissible
@dismiss="clearError"
/>
<ErrorMessage :error="error" title="登录失败" dismissible @dismiss="clearError" />
</div>
<div class="login-status" v-if="isLoggedIn">
<div class="status-success">
<svg viewBox="0 0 24 24" fill="currentColor">
<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>
<div class="status-content">
<h3>已登录</h3>
<p>欢迎回来，{{ username }}！</p>
</div>
</div>
<div class="login-actions">
<router-link to="/" class="btn btn-primary">
返回首页
@@ -58,37 +54,24 @@
<div class="code-input-section">
<div class="input-group">
<label for="authCode" class="input-label">授权码</label>
<input
id="authCode"
v-model="authCode"
type="text"
placeholder="粘贴授权码..."
class="code-input"
:disabled="loading"
/>
<input id="authCode" v-model="authCode" type="text" placeholder="粘贴授权码..." class="code-input"
:disabled="loading" />
</div>
<div class="login-actions">
<button
@click="handleLogin"
class="btn btn-secondary"
:disabled="loading"
>
<button @click="handleLogin" class="btn btn-secondary" :disabled="loading">
<LoadingSpinner v-if="loading" text="获取登录链接..." />
<span v-else>获取登录链接</span>
</button>
<button
@click="handleManualLogin"
class="btn btn-primary btn-large"
:disabled="!authCode.trim() || loading"
>
<button @click="handleManualLogin" class="btn btn-primary btn-large"
:disabled="!authCode.trim() || loading">
<LoadingSpinner v-if="loading" text="登录中..." />
<span v-else>完成登录</span>
</button>
</div>
</div>
<div class="login-actions">
<router-link to="/" class="btn btn-text">
返回首页
@@ -113,8 +96,7 @@
import { computed, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from '@/stores/auth';
import LoadingSpinner from '@/components/common/LoadingSpinner.vue';
import ErrorMessage from '@/components/common/ErrorMessage.vue';
const router = useRouter();
const authStore = useAuthStore();
@@ -447,17 +429,17 @@ const clearError = () => {
.login-page {
padding: 1rem;
}
.login-card {
padding: 2rem;
}
.login-title {
font-size: 1.75rem;
}
.btn-large {
min-width: 100%;
}
}
</style>
</style>
ui/src/views/RankingView.vue
+26 -45
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>
@@ -21,21 +21,12 @@
<div v-else class="ranking-content">
<!-- 排行榜头部信息 -->
<RankingHeader
:currentMode="currentMode"
:currentType="currentType"
@mode-change="handleModeChange"
@type-change="handleTypeChange"
@download-success="handleDownloadSuccess"
@download-error="handleDownloadError"
/>
<RankingHeader :currentMode="currentMode" :currentType="currentType" @mode-change="handleModeChange"
@type-change="handleTypeChange" @download-success="handleDownloadSuccess"
@download-error="handleDownloadError" />
<!-- 排行榜统计信息 -->
<RankingStats
:totalCount="totalCount"
:currentPage="currentPage"
:totalPages="totalPages"
/>
<RankingStats :totalCount="totalCount" :currentPage="currentPage" :totalPages="totalPages" />
<!-- 作品列表 -->
<div class="artworks-section">
@@ -44,12 +35,7 @@
</div>
<div v-else-if="artworks && 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">
@@ -57,13 +43,8 @@
</div>
<!-- 分页导航 -->
<RankingPagination
v-if="totalPages > 1 && artworks && artworks.length > 0"
:currentPage="currentPage"
:totalPages="totalPages"
:visiblePages="visiblePages"
@page-change="goToPage"
/>
<RankingPagination v-if="totalPages > 1 && artworks && artworks.length > 0" :currentPage="currentPage"
:totalPages="totalPages" :visiblePages="visiblePages" @page-change="goToPage" />
<!-- 页面信息 -->
<div v-if="totalPages > 1 && artworks && artworks.length > 0" class="page-info">
@@ -83,8 +64,7 @@ import { useAuthStore } from '@/stores/auth';
import rankingService from '@/services/ranking';
import downloadService from '@/services/download';
import type { Artwork } from '@/types';
import LoadingSpinner from '@/components/common/LoadingSpinner.vue';
import ErrorMessage from '@/components/common/ErrorMessage.vue';
import ArtworkCard from '@/components/artwork/ArtworkCard.vue';
import RankingHeader from '@/components/ranking/RankingHeader.vue';
import RankingStats from '@/components/ranking/RankingStats.vue';
@@ -120,15 +100,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;
});
@@ -141,17 +121,17 @@ const getCacheKey = (mode: string, 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;
};
@@ -171,7 +151,7 @@ const clearCache = () => {
const fetchRankingData = async (page = 1) => {
const cacheKey = getCacheKey(currentMode.value, currentType.value, page);
const cached = getCache(cacheKey);
if (cached) {
artworks.value = cached.artworks;
totalCount.value = cached.totalCount;
@@ -183,7 +163,7 @@ const fetchRankingData = async (page = 1) => {
try {
artworksLoading.value = true;
error.value = null;
const offset = (page - 1) * pageSize.value;
const response = await rankingService.getRanking({
mode: currentMode.value,
@@ -191,15 +171,15 @@ const fetchRankingData = async (page = 1) => {
offset: offset,
limit: pageSize.value
});
if (response.success && response.data) {
// 根据后端返回的数据结构，artworks在 response.data.data.artworks
const rankingData = response.data.data || response.data;
artworks.value = rankingData.artworks || [];
// 基于 next_url 来判断是否还有更多页面
const hasMore = !!rankingData.next_url;
if (page === 1) {
// 第一页，基于是否有下一页来判断总数
if (hasMore) {
@@ -223,9 +203,9 @@ const fetchRankingData = async (page = 1) => {
totalPages.value = Math.max(totalPages.value, page);
}
}
currentPage.value = page;
// 缓存结果
setCache(cacheKey, {
artworks: rankingData.artworks || [],
@@ -366,6 +346,7 @@ onMounted(async () => {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
@@ -410,15 +391,15 @@ onMounted(async () => {
.container {
padding: 0 1rem;
}
.artworks-grid {
grid-template-columns: 1fr;
}
.page-info {
flex-direction: column;
gap: 0.5rem;
text-align: center;
}
}
</style>
</style>
ui/src/views/SearchView.vue
+1 -2
View File
@@ -167,8 +167,7 @@ import { useRouter, useRoute } from 'vue-router';
import { useAuthStore } from '@/stores/auth';
import artworkService from '@/services/artwork';
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';