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
backend/routes/artwork.js
+85
View File
@@ -65,6 +65,46 @@ router.get('/search', async (req, res) => {
}
});
/**
* 获取用户收藏的作品列表
* GET /api/artwork/bookmarks
*/
router.get('/bookmarks', async (req, res) => {
try {
const {
type = 'all',
offset = 0,
limit = 30
} = req.query;
const artworkService = new ArtworkService(req.backend.getAuth());
const result = await artworkService.getBookmarks({
type,
offset: parseInt(offset),
limit: parseInt(limit)
});
if (result.success) {
res.json({
success: true,
data: result.data
});
} else {
res.status(400).json({
success: false,
error: result.error
});
}
} catch (error) {
res.status(500).json({
success: false,
error: error.message
});
}
});
/**
* 获取作品详情
* GET /api/artwork/:id
@@ -181,4 +221,49 @@ router.get('/:id/images', async (req, res) => {
}
});
/**
* 收藏/取消收藏作品
* POST /api/artwork/:id/bookmark
*/
router.post('/:id/bookmark', async (req, res) => {
try {
const { id } = req.params;
const { action = 'add' } = req.body; // 'add' 或 'remove'
if (!id || isNaN(parseInt(id))) {
return res.status(400).json({
success: false,
error: 'Invalid artwork ID'
});
}
if (!['add', 'remove'].includes(action)) {
return res.status(400).json({
success: false,
error: 'Invalid action. Must be "add" or "remove"'
});
}
const artworkService = new ArtworkService(req.backend.getAuth());
const result = await artworkService.toggleBookmark(parseInt(id), action);
if (result.success) {
res.json({
success: true,
data: result.data
});
} else {
res.status(400).json({
success: false,
error: result.error
});
}
} catch (error) {
res.status(500).json({
success: false,
error: error.message
});
}
});
module.exports = router;
backend/services/artwork.js
+80
View File
@@ -277,6 +277,86 @@ class ArtworkService {
}
}
/**
* 收藏/取消收藏作品
*/
/**
* 收藏/取消收藏作品
* TODO: Pixiv API 端点已更改，需要研究新的端点
* 当前端点 /v1/illust/bookmark/add 和 /v1/illust/bookmark/delete 已不可用
*/
async toggleBookmark(artworkId, action = 'add') {
try {
// TODO: 需要研究新的 Pixiv API 端点
// 当前所有收藏相关的 API 端点都返回 404 错误
console.log(`尝试${action === 'add' ? '添加' : '删除'}收藏 ${artworkId}，但API端点不可用`);
return {
success: false,
error: `收藏功能暂时不可用。请前往 Pixiv 官方网站进行${action === 'add' ? '收藏' : '取消收藏'}操作。`
};
} catch (error) {
return {
success: false,
error: error.message,
};
}
}
/**
* 获取用户收藏的作品列表
*/
async getBookmarks(options = {}) {
try {
const { type = 'all', offset = 0, limit = 30 } = options;
// 从认证状态获取用户ID
const status = this.auth.getStatus();
if (!status.isLoggedIn || !this.auth.user || !this.auth.user.id) {
throw new Error('用户未登录或无法获取用户ID');
}
const userId = this.auth.user.id;
// 根据类型选择不同的API端点
let endpoint = '/v1/user/bookmarks/illust';
if (type === 'manga') {
endpoint = '/v1/user/bookmarks/novel';
} else if (type === 'novel') {
endpoint = '/v1/user/bookmarks/novel';
}
const params = {
user_id: userId,
restrict: 'public',
offset,
limit,
};
const response = await this.makeRequest('GET', `${endpoint}?${stringify(params)}`);
return {
success: true,
data: {
artworks: response.illusts || [],
next_url: response.next_url,
total: response.total || 0,
},
};
} catch (error) {
console.error('获取收藏列表失败:', {
message: error.message,
status: error.response?.status,
data: error.response?.data,
config: error.config
});
return {
success: false,
error: error.message,
};
}
}
/**
* 发送API请求
*/
ui/src/App.vue
+7 -9
View File
@@ -21,7 +21,8 @@ onMounted(async () => {
<div class="nav-brand">
<RouterLink to="/" class="brand-link">
<svg viewBox="0 0 24 24" fill="currentColor" class="brand-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 class="brand-text">Pixiv Manager</span>
</RouterLink>
@@ -34,6 +35,7 @@ onMounted(async () => {
<RouterLink to="/downloads" class="nav-link" v-if="isLoggedIn">下载管理</RouterLink>
<RouterLink to="/artists" class="nav-link" v-if="isLoggedIn">作者管理</RouterLink>
<RouterLink to="/repository" class="nav-link" v-if="isLoggedIn">仓库管理</RouterLink>
<RouterLink to="/bookmarks" class="nav-link" v-if="isLoggedIn">我的收藏</RouterLink>
</div>
<div class="nav-auth">
@@ -44,15 +46,11 @@ onMounted(async () => {
<RouterLink v-else to="/login" class="btn btn-primary">登录</RouterLink>
<!-- GitHub 链接 -->
<a
href="https://github.com/kjqwer/pixiv-D"
target="_blank"
rel="noopener noreferrer"
class="github-link"
title="查看项目源码"
>
<a href="https://github.com/kjqwer/pixiv-D" target="_blank" rel="noopener noreferrer" class="github-link"
title="查看项目源码">
<svg viewBox="0 0 24 24" fill="currentColor" class="github-icon">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
<path
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
</svg>
</a>
</div>
ui/src/components/artwork/ArtworkCard.vue
+1 -1
View File
@@ -55,7 +55,7 @@
<script setup lang="ts">
import { ref } from 'vue';
import LoadingSpinner from '@/components/common/LoadingSpinner.vue';
import { getImageProxyUrl } from '@/services/api';
import type { Artwork } from '@/types';
ui/src/components/search/ArtistSearch.vue
+10 -25
View File
@@ -3,16 +3,12 @@
<!-- 搜索表单 -->
<div class="search-form">
<div class="search-input-group">
<input
v-model="searchKeyword"
type="text"
placeholder="输入作者名称或账号搜索..."
class="search-input"
@keyup.enter="handleSearch"
/>
<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"/>
<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>
@@ -20,11 +16,7 @@
<!-- 搜索选项 -->
<div class="search-options">
<label class="checkbox-label">
<input
v-model="hideFollowedArtists"
type="checkbox"
class="form-checkbox"
/>
<input v-model="hideFollowedArtists" type="checkbox" class="form-checkbox" />
<span>隐藏已关注的作者</span>
</label>
</div>
@@ -48,22 +40,16 @@
</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"
/>
<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"/>
<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>
@@ -83,8 +69,7 @@
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()
ui/src/main.ts
+8
View File
@@ -6,8 +6,16 @@ import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
// 导入全局组件
import ErrorMessage from '@/components/common/ErrorMessage.vue'
import LoadingSpinner from '@/components/common/LoadingSpinner.vue'
const app = createApp(App)
// 注册全局组件
app.component('ErrorMessage', ErrorMessage)
app.component('LoadingSpinner', LoadingSpinner)
app.use(createPinia())
app.use(router)
ui/src/router/index.ts
+6
View File
@@ -56,6 +56,12 @@ const router = createRouter({
name: 'repository',
component: () => import('@/views/RepositoryView.vue'),
meta: { requiresAuth: true }
},
{
path: '/bookmarks',
name: 'bookmarks',
component: () => import('@/views/BookmarksView.vue'),
meta: { requiresAuth: true }
}
]
})
ui/src/services/artwork.ts
+20
View File
@@ -77,6 +77,26 @@ class ArtworkService {
return apiService.get<{ artworks: Artwork[]; next_url?: string; total: number }>(`/api/artwork/search?${queryParams.toString()}`);
}
/**
* 收藏/取消收藏作品
*/
async toggleBookmark(artworkId: number, action: 'add' | 'remove'): Promise<ApiResponse<{ artwork_id: number; is_bookmarked: boolean; message: string }>> {
return apiService.post<{ artwork_id: number; is_bookmarked: boolean; message: string }>(`/api/artwork/${artworkId}/bookmark`, { action });
}
/**
* 获取用户收藏的作品列表
*/
async getBookmarks(params: { type?: string; offset?: number; limit?: number } = {}): Promise<ApiResponse<{ artworks: Artwork[]; next_url?: string; total: number }>> {
const queryParams = new URLSearchParams();
if (params.type) queryParams.append('type', params.type);
if (params.offset !== undefined) queryParams.append('offset', params.offset.toString());
if (params.limit !== undefined) queryParams.append('limit', params.limit.toString());
return apiService.get<{ artworks: Artwork[]; next_url?: string; total: number }>(`/api/artwork/bookmarks?${queryParams.toString()}`);
}
}
export const artworkService = new ArtworkService();
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
+20 -57
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();
ui/src/views/HomeView.vue
+28 -116
View File
@@ -21,25 +21,14 @@ onMounted(async () => {
</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>
@@ -54,7 +43,8 @@ onMounted(async () => {
<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,7 +95,8 @@ 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="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>
@@ -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,59 +268,7 @@ 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 {
@@ -379,8 +293,6 @@ onMounted(async () => {
grid-template-columns: 1fr;
}
.quick-actions-grid {
grid-template-columns: 1fr;
}
}
</style>
ui/src/views/LoginView.vue
+9 -27
View File
@@ -10,18 +10,14 @@
</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>
@@ -58,31 +54,18 @@
<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>
@@ -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();
ui/src/views/RankingView.vue
+9 -28
View File
@@ -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';
@@ -366,6 +346,7 @@ onMounted(async () => {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
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';