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-24 20:38:28 +08:00
parent a35e82731d
commit 275a3672d2
12 changed files with 284 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+2 -1
View File
@@ -63,10 +63,11 @@ Pixiv 下载浏览管理器是一个基于 Web 的应用程序，提供以下功
4. **启动应用**
- 修改代理端口，请用记事本打开 `start.bat` 文件，修改PROXY_PORT端口号
- 修改服务器端口，请用记事本打开 `start.bat` 文件，修改SERVER_PORT端口号（默认3000）
- 双击 `start.bat` 文件启动
5. **访问应用**
- 打开浏览器访问：http://localhost:3000
- 打开浏览器访问：http://localhost:3000（默认端口，可修改）
## 🌐 代理配置
backend/server.js
+82 -62
View File
@@ -23,20 +23,21 @@ const proxyConfig = require('./config');
// 自定义日志中间件
function customLogger(req, res, next) {
// 过滤掉静态资源请求和图片代理请求
const isStaticResource = req.path.startsWith('/assets/') ||
req.path.startsWith('/downloads/') ||
req.path.includes('.js') ||
req.path.includes('.css') ||
req.path.includes('.ico') ||
req.path.includes('.png') ||
req.path.includes('.jpg') ||
req.path.includes('.jpeg') ||
req.path.includes('.gif') ||
req.path.includes('.svg') ||
req.path.includes('.woff') ||
req.path.includes('.woff2') ||
req.path.includes('.ttf') ||
req.path.includes('.eot');
const isStaticResource =
req.path.startsWith('/assets/') ||
req.path.startsWith('/downloads/') ||
req.path.includes('.js') ||
req.path.includes('.css') ||
req.path.includes('.ico') ||
req.path.includes('.png') ||
req.path.includes('.jpg') ||
req.path.includes('.jpeg') ||
req.path.includes('.gif') ||
req.path.includes('.svg') ||
req.path.includes('.woff') ||
req.path.includes('.woff2') ||
req.path.includes('.ttf') ||
req.path.includes('.eot');
// 过滤掉图片代理请求
const isImageProxy = req.path === '/api/proxy/image';
@@ -44,17 +45,17 @@ function customLogger(req, res, next) {
// 只记录API请求和重要请求，排除静态资源和图片代理
if (!isStaticResource && !isImageProxy) {
const start = Date.now();
// 原始响应结束方法
const originalEnd = res.end;
// 重写响应结束方法以获取响应时间
res.end = function(chunk, encoding) {
res.end = function (chunk, encoding) {
const duration = Date.now() - start;
const statusCode = res.statusCode;
const method = req.method;
const url = req.originalUrl;
// 根据状态码选择颜色和图标
let statusIcon, statusColor;
if (statusCode >= 200 && statusCode < 300) {
@@ -70,38 +71,49 @@ function customLogger(req, res, next) {
statusIcon = '❌';
statusColor = '\x1b[31m'; // 红色
}
// 根据请求类型选择图标
let methodIcon;
switch (method) {
case 'GET': methodIcon = '📥'; break;
case 'POST': methodIcon = '📤'; break;
case 'PUT': methodIcon = '🔄'; break;
case 'DELETE': methodIcon = '🗑️'; break;
case 'PATCH': methodIcon = '🔧'; break;
default: methodIcon = '❓';
case 'GET':
methodIcon = '📥';
break;
case 'POST':
methodIcon = '📤';
break;
case 'PUT':
methodIcon = '🔄';
break;
case 'DELETE':
methodIcon = '🗑️';
break;
case 'PATCH':
methodIcon = '🔧';
break;
default:
methodIcon = '❓';
}
// 格式化时间
const now = new Date();
const timeStr = now.toLocaleTimeString('zh-CN', {
const timeStr = now.toLocaleTimeString('zh-CN', {
hour12: false,
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
second: '2-digit',
});
// 构建日志消息
const logMessage = `${statusColor}${statusIcon} ${methodIcon} ${method} ${url} ${statusCode} ${duration}ms\x1b[0m`;
// 输出日志
console.log(`[${timeStr}] ${logMessage}`);
// 调用原始的end方法
originalEnd.call(this, chunk, encoding);
};
}
next();
}
@@ -109,7 +121,7 @@ class PixivServer {
constructor() {
this.app = express();
this.backend = null;
this.port = process.env.PORT || 3000;
this.port = 3000; // 默认端口，会在init时重新设置
}
/**
@@ -117,23 +129,26 @@ class PixivServer {
*/
async init() {
console.log('\x1b[34m🔧 正在初始化 Pixiv 后端服务器...\x1b[0m');
// 重新设置端口（从环境变量获取）
this.port = process.env.PORT || 3000;
// 设置代理
proxyConfig.setEnvironmentVariables();
// 初始化 Pixiv 后端
this.backend = new PixivBackend();
await this.backend.init();
// 配置中间件
this.setupMiddleware();
// 配置路由
this.setupRoutes();
// 配置错误处理 - 临时注释掉
this.setupErrorHandling();
console.log('\x1b[32m✅ 服务器初始化完成\x1b[0m');
}
@@ -143,23 +158,25 @@ class PixivServer {
setupMiddleware() {
// 自定义日志中间件（替换morgan）
this.app.use(customLogger);
// CORS 中间件
this.app.use(cors({
origin: process.env.FRONTEND_URL || 'http://localhost:5173',
credentials: true
}));
this.app.use(
cors({
origin: process.env.FRONTEND_URL || true, // 允许所有来源，或者通过环境变量指定
credentials: true,
})
);
// JSON 解析中间件
this.app.use(express.json({ limit: '10mb' }));
this.app.use(express.urlencoded({ extended: true, limit: '10mb' }));
// 静态文件服务
this.app.use('/downloads', express.static(path.join(__dirname, '../downloads')));
// 前端静态文件服务
this.app.use(express.static(path.join(__dirname, '../ui/dist')));
// 将后端实例注入到请求对象中
this.app.use((req, res, next) => {
req.backend = this.backend;
@@ -173,13 +190,13 @@ class PixivServer {
setupRoutes() {
// 健康检查
this.app.get('/health', (req, res) => {
res.json({
status: 'ok',
res.json({
status: 'ok',
timestamp: new Date().toISOString(),
backend: {
isLoggedIn: req.backend.isLoggedIn,
user: req.backend.config.user?.account
}
user: req.backend.config.user?.account,
},
});
});
@@ -191,17 +208,17 @@ class PixivServer {
this.app.use('/api/ranking', authMiddleware, rankingRoutes);
this.app.use('/api/repository', repositoryRoutes); // 仓库管理，不需要认证
this.app.use('/api/proxy', proxyRoutes); // 图片代理，不需要认证
// 404 处理
this.app.use((req, res) => {
// 如果是API请求，返回JSON格式的404
if (req.path.startsWith('/api/')) {
return res.status(404).json({
error: 'Not Found',
message: `Route ${req.originalUrl} not found`
});
return res.status(404).json({
error: 'Not Found',
message: `Route ${req.originalUrl} not found`,
});
}
// 否则返回前端页面（SPA路由支持）
res.sendFile(path.join(__dirname, '../ui/dist/index.html'));
});
@@ -245,13 +262,16 @@ class PixivServer {
// 如果直接运行此文件
if (require.main === module) {
const server = new PixivServer();
// 处理进程信号
process.on('SIGINT', () => server.shutdown());
process.on('SIGTERM', () => server.shutdown());
// 启动服务器
server.init().then(() => server.start()).catch(console.error);
server
.init()
.then(() => server.start())
.catch(console.error);
}
module.exports = PixivServer;
module.exports = PixivServer;
backend/start.js
+38 -8
View File
@@ -10,15 +10,38 @@ const PixivServer = require('./server');
function parseArguments() {
const args = process.argv.slice(2);
const options = {};
for (let i = 0; i < args.length; i++) {
const arg = args[i];
if (arg === '--proxy-port' && i + 1 < args.length) {
options.proxyPort = parseInt(args[i + 1]);
// 处理 --key=value 格式
if (arg.startsWith('--proxy-port=')) {
const port = parseInt(arg.split('=')[1]);
if (!isNaN(port)) {
options.proxyPort = port;
}
} else if (arg.startsWith('--server-port=')) {
const port = parseInt(arg.split('=')[1]);
if (!isNaN(port)) {
options.serverPort = port;
}
}
// 处理 --key value 格式（向后兼容）
else if (arg === '--proxy-port' && i + 1 < args.length) {
const port = parseInt(args[i + 1]);
if (!isNaN(port)) {
options.proxyPort = port;
}
i++; // 跳过下一个参数
} else if (arg === '--server-port' && i + 1 < args.length) {
const port = parseInt(args[i + 1]);
if (!isNaN(port)) {
options.serverPort = port;
}
i++; // 跳过下一个参数
}
}
return options;
}
@@ -34,6 +57,12 @@ if (cliOptions.proxyPort) {
console.log(`\x1b[36m📡 代理端口已设置为: ${cliOptions.proxyPort}\x1b[0m`);
}
// 如果提供了服务器端口，设置环境变量
if (cliOptions.serverPort) {
process.env.PORT = cliOptions.serverPort.toString();
console.log(`\x1b[36m🌐 服务器端口已设置为: ${cliOptions.serverPort}\x1b[0m`);
}
console.log('\x1b[35m🚀 启动 Pixiv 后端服务器...\x1b[0m');
// 创建服务器实例
@@ -51,7 +80,7 @@ process.on('SIGTERM', async () => {
});
// 处理未捕获的异常
process.on('uncaughtException', (error) => {
process.on('uncaughtException', error => {
console.error('\x1b[31m❌ 未捕获的异常:\x1b[0m', error);
process.exit(1);
});
@@ -62,9 +91,10 @@ process.on('unhandledRejection', (reason, promise) => {
});
// 启动服务器
server.init()
server
.init()
.then(() => server.start())
.catch((error) => {
.catch(error => {
console.error('\x1b[31m❌ 服务器启动失败:\x1b[0m', error);
process.exit(1);
});
});
scripts/create-portable.js
+16 -11
View File
@@ -19,14 +19,11 @@ async function createPortable() {
// 创建启动脚本
const startScript = `@echo off
chcp 65001 >nul
title Pixiv Manager
:: ========================================
:: 代理配置 - 请根据你的代理软件修改端口号
:: 常见端口: Clash=7890, V2Ray=10809, Shadowsocks=1080
:: ========================================
set PROXY_PORT=7890
set SERVER_PORT=3000
echo.
echo ========================================
@@ -37,17 +34,19 @@ echo.
cd /d "%~dp0"
echo Current proxy port: %PROXY_PORT%
echo To change proxy port, edit this file and modify line 6
echo Current server port: %SERVER_PORT%
echo To change proxy port, edit PROXY_PORT=xxxx in this file
echo To change server port, edit SERVER_PORT=xxxx in this file
echo.
echo Starting backend server...
echo Access URL: http://localhost:3000
echo Access URL: http://localhost:%SERVER_PORT%
echo.
echo Tip: Press Ctrl+C to stop server
echo.
:: Start server and pass proxy port
pixiv-backend.exe --proxy-port=%PROXY_PORT%
:: Start server and pass proxy port and server port
pixiv-backend.exe --proxy-port=%PROXY_PORT% --server-port=%SERVER_PORT%
echo.
echo Server stopped
@@ -65,13 +64,19 @@ pause
2. 在浏览器中访问 http://localhost:3000
3. 按 Ctrl+C 停止服务器
## 代理设置（重要）
## 配置设置
如需使用代理，请用记事本编辑 \`start.bat\` 文件，修改（PROXY_PORT=xxxx）的端口号：
如需修改配置，请用记事本编辑 \`start.bat\` 文件：
### 代理设置（重要）
修改（PROXY_PORT=xxxx）的端口号：
- Clash: 7890
- V2Ray: 10809
- Shadowsocks: 1080
### 服务器端口设置
修改（SERVER_PORT=xxxx）的端口号，默认为3000
## 注意事项
- 首次运行可能需要几秒钟启动时间
start.bat
+14 -4
View File
@@ -7,6 +7,11 @@ chcp 65001 >nul
:: ========================================
set PROXY_PORT=
:: ========================================
:: 服务器端口配置 - 默认3000
:: ========================================
set SERVER_PORT=3000
echo.
echo 🚀 Pixiv Manager 启动中...
echo.
@@ -14,17 +19,22 @@ echo.
cd /d "%~dp0"
echo 📡 当前代理端口: %PROXY_PORT%
echo 💡 如需修改代理端口，请用记事本打开此文件，修改第6行的端口号
echo 🌐 当前服务器端口: %SERVER_PORT%
echo 💡 如需修改端口，请用记事本打开此文件，修改对应的端口号
echo.
echo 📊 启动后端服务器...
echo 🌐 访问地址: http://localhost:3000
echo 🌐 访问地址: http://localhost:%SERVER_PORT%
echo.
echo 💡 提示: 按 Ctrl+C 停止服务器
echo.
:: 启动服务器并传递代理端口
node backend/start.js --proxy-port=%PROXY_PORT%
:: 启动服务器并传递代理端口和服务器端口
if "%PROXY_PORT%"=="" (
node backend/start.js --server-port=%SERVER_PORT%
) else (
node backend/start.js --proxy-port=%PROXY_PORT% --server-port=%SERVER_PORT%
)
echo.
echo ⏹️ 服务器已停止
ui/README.md
+2
View File
@@ -120,6 +120,8 @@ pnpm lint
VITE_API_BASE_URL=http://localhost:3000
```
> **注意**: 在生产环境中，前端会自动使用当前域名和端口，无需手动设置此环境变量。
### 构建部署
```bash
ui/src/components/artist/ArtistCard.vue
+15 -34
View File
@@ -1,35 +1,23 @@
<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"
/>
<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"
>
<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 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">
查看作品
@@ -42,6 +30,8 @@
</template>
<script setup lang="ts">
import { getImageProxyUrl } from '@/services/api';
interface Artist {
id: number
name: string
@@ -86,18 +76,8 @@ 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
}
// 使用统一的图片代理函数
const getImageUrl = getImageProxyUrl
</script>
<style scoped>
@@ -135,7 +115,8 @@ const getImageUrl = (originalUrl: string) => {
.artist-info {
flex: 1;
min-width: 0; /* 防止文本溢出 */
min-width: 0;
/* 防止文本溢出 */
}
.artist-name {
@@ -228,14 +209,14 @@ const getImageUrl = (originalUrl: string) => {
text-align: center;
gap: 1rem;
}
.artist-actions-bottom {
flex-direction: column;
}
.artist-avatar {
width: 5rem;
height: 5rem;
}
}
</style>
</style>
ui/src/components/artwork/ArtworkCard.vue
+17 -38
View File
@@ -1,14 +1,8 @@
<template>
<div class="artwork-card" @click="handleClick">
<div class="artwork-image">
<img
:src="getImageUrl(artwork.image_urls.medium)"
:alt="artwork.title"
@load="imageLoaded = true"
@error="imageError = true"
:class="{ loaded: imageLoaded, error: imageError }"
crossorigin="anonymous"
/>
<img :src="getImageUrl(artwork.image_urls.medium)" :alt="artwork.title" @load="imageLoaded = true"
@error="imageError = true" :class="{ loaded: imageLoaded, error: imageError }" crossorigin="anonymous" />
<div v-if="!imageLoaded && !imageError" class="image-placeholder">
<LoadingSpinner text="加载中..." />
</div>
@@ -16,45 +10,39 @@
<span>图片加载失败</span>
</div>
</div>
<div class="artwork-info">
<h3 class="artwork-title" :title="artwork.title">
{{ artwork.title }}
</h3>
<div class="artwork-meta">
<div class="artist-info">
<img
:src="getImageUrl(artwork.user.profile_image_urls.medium)"
:alt="artwork.user.name"
class="artist-avatar"
crossorigin="anonymous"
/>
<img :src="getImageUrl(artwork.user.profile_image_urls.medium)" :alt="artwork.user.name" class="artist-avatar"
crossorigin="anonymous" />
<span class="artist-name">{{ artwork.user.name }}</span>
</div>
<div class="artwork-stats">
<span class="stat">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
<path
d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
</svg>
{{ artwork.total_bookmarks }}
</span>
<span class="stat">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
<path
d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" />
</svg>
{{ artwork.total_view }}
</span>
</div>
</div>
<div class="artwork-tags">
<span
v-for="tag in artwork.tags.slice(0, 3)"
:key="tag.name"
class="tag"
>
<span v-for="tag in artwork.tags.slice(0, 3)" :key="tag.name" class="tag">
{{ tag.name }}
</span>
<span v-if="artwork.tags.length > 3" class="tag-more">
@@ -68,6 +56,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';
interface Props {
@@ -88,18 +77,8 @@ const handleClick = () => {
emit('click', props.artwork);
};
// 处理图片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;
};
// 使用统一的图片代理函数
const getImageUrl = getImageProxyUrl;
</script>
<style scoped>
@@ -239,4 +218,4 @@ const getImageUrl = (originalUrl: string) => {
font-size: 0.75rem;
line-height: 1;
}
</style>
</style>
ui/src/services/api.ts
+19 -3
View File
@@ -1,15 +1,31 @@
import axios, { type AxiosInstance, type AxiosRequestConfig, type AxiosResponse } from 'axios';
import type { ApiResponse } from '@/types';
// API配置
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000';
// API配置 - 使用相对路径，这样就不需要硬编码端口
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || '';
// 导出API基础URL，供其他组件使用
export const getApiBaseUrl = () => API_BASE_URL || window.location.origin;
// 获取图片代理URL的工具函数
export const getImageProxyUrl = (originalUrl: string) => {
if (!originalUrl) return '';
// 如果是Pixiv的图片URL，通过后端代理
if (originalUrl.includes('i.pximg.net')) {
const encodedUrl = encodeURIComponent(originalUrl);
return `${getApiBaseUrl()}/api/proxy/image?url=${encodedUrl}`;
}
return originalUrl;
};
class ApiService {
private client: AxiosInstance;
constructor() {
this.client = axios.create({
baseURL: API_BASE_URL,
baseURL: API_BASE_URL || window.location.origin,
timeout: 60000, // 增加到60秒
headers: {
'Content-Type': 'application/json',
ui/src/services/download.ts
+2 -2
View File
@@ -1,4 +1,4 @@
import apiService from './api';
import apiService, { getApiBaseUrl } from './api';
import type { DownloadTask } from '@/types';
class DownloadService {
@@ -132,7 +132,7 @@ class DownloadService {
* 使用SSE监听下载进度
*/
streamTaskProgress(taskId: string, onProgress: (task: DownloadTask) => void, onComplete?: () => void) {
const eventSource = new EventSource(`http://localhost:3000/api/download/stream/${taskId}`);
const eventSource = new EventSource(`${getApiBaseUrl()}/api/download/stream/${taskId}`);
eventSource.onmessage = (event) => {
try {
ui/src/views/ArtistView.vue
+3 -12
View File
@@ -124,6 +124,7 @@ import { useRoute, useRouter } from 'vue-router';
import { useAuthStore } from '@/stores/auth';
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';
@@ -385,18 +386,8 @@ 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;
};
// 使用统一的图片代理函数
const getImageUrl = getImageProxyUrl;
// 点击作品
const handleArtworkClick = (artwork: Artwork) => {
ui/src/views/ArtworkView.vue
+74 -116
View File
@@ -13,14 +13,8 @@
<!-- 作品图片 -->
<div class="artwork-gallery">
<div class="main-image">
<img
:src="getImageUrl(currentImageUrl)"
:alt="artwork.title"
@load="imageLoaded = true"
@error="imageError = true"
:class="{ loaded: imageLoaded, error: imageError }"
crossorigin="anonymous"
/>
<img :src="getImageUrl(currentImageUrl)" :alt="artwork.title" @load="imageLoaded = true"
@error="imageError = true" :class="{ loaded: imageLoaded, error: imageError }" crossorigin="anonymous" />
<div v-if="!imageLoaded && !imageError" class="image-placeholder">
<LoadingSpinner text="加载中..." />
</div>
@@ -31,14 +25,10 @@
<!-- 多页作品缩略图 -->
<div v-if="artwork.page_count > 1" class="thumbnails">
<button
v-for="(page, index) in artwork.meta_pages"
:key="index"
@click="currentPage = index"
class="thumbnail"
:class="{ active: currentPage === index }"
>
<img :src="getImageUrl(page.image_urls.square_medium)" :alt="`第 ${index + 1} 页`" crossorigin="anonymous" />
<button v-for="(page, index) in artwork.meta_pages" :key="index" @click="currentPage = index"
class="thumbnail" :class="{ active: currentPage === index }">
<img :src="getImageUrl(page.image_urls.square_medium)" :alt="`第 ${index + 1} 页`"
crossorigin="anonymous" />
</button>
</div>
</div>
@@ -63,30 +53,21 @@
<div v-if="isDownloaded && !currentTask" class="download-status">
<div class="status-indicator">
<svg viewBox="0 0 24 24" fill="currentColor" class="status-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>已下载到本地</span>
</div>
</div>
<!-- 下载进度 -->
<DownloadProgress
v-if="currentTask"
:task="currentTask"
:loading="downloading"
@update="updateTask"
@remove="removeTask"
/>
<DownloadProgress v-if="currentTask" :task="currentTask" :loading="downloading" @update="updateTask"
@remove="removeTask" />
</div>
<!-- 作者信息 -->
<div class="artist-info">
<img
:src="getImageUrl(artwork.user.profile_image_urls.medium)"
:alt="artwork.user.name"
class="artist-avatar"
crossorigin="anonymous"
/>
<img :src="getImageUrl(artwork.user.profile_image_urls.medium)" :alt="artwork.user.name"
class="artist-avatar" crossorigin="anonymous" />
<div class="artist-details">
<h3 class="artist-name">{{ artwork.user.name }}</h3>
<p class="artist-account">@{{ artwork.user.account }}</p>
@@ -98,36 +79,24 @@
<!-- 作品导航 -->
<div v-if="showNavigation" class="artwork-navigation">
<button
@click="goBackToArtist"
class="nav-btn nav-back"
title="返回作者页面"
>
<button @click="goBackToArtist" class="nav-btn nav-back" title="返回作者页面">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
</svg>
<span>返回</span>
</button>
<button
@click="navigateToPrevious"
class="nav-btn nav-prev"
:disabled="!previousArtwork"
:title="previousArtwork ? `上一个: ${previousArtwork.title}` : '没有上一个作品'"
>
<button @click="navigateToPrevious" class="nav-btn nav-prev" :disabled="!previousArtwork"
:title="previousArtwork ? `上一个: ${previousArtwork.title}` : '没有上一个作品'">
<svg viewBox="0 0 24 24" fill="currentColor">
<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>
<span>上一个</span>
</button>
<button
@click="navigateToNext"
class="nav-btn nav-next"
:disabled="!nextArtwork"
:title="nextArtwork ? `下一个: ${nextArtwork.title}` : '没有下一个作品'"
>
<button @click="navigateToNext" class="nav-btn nav-next" :disabled="!nextArtwork"
:title="nextArtwork ? `下一个: ${nextArtwork.title}` : '没有下一个作品'">
<span>下一个</span>
<svg viewBox="0 0 24 24" fill="currentColor">
<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>
@@ -136,19 +105,22 @@
<div class="artwork-stats">
<div class="stat">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
<path
d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
</svg>
<span>{{ artwork.total_bookmarks }}</span>
</div>
<div class="stat">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
<path
d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" />
</svg>
<span>{{ artwork.total_view }}</span>
</div>
<div class="stat">
<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" />
</svg>
<span>{{ artwork.width }} × {{ artwork.height }}</span>
</div>
@@ -158,14 +130,9 @@
<div class="artwork-tags">
<h3>标签</h3>
<div class="tags-list">
<button
v-for="tag in artwork.tags"
:key="tag.name"
@click="handleTagClick($event, tag.name)"
class="tag tag-clickable"
:class="{ 'tag-selected': selectedTags.includes(tag.name) }"
:title="`搜索标签: ${tag.name} (按住Ctrl键点击选择多个标签，松开Ctrl键搜索)`"
>
<button v-for="tag in artwork.tags" :key="tag.name" @click="handleTagClick($event, tag.name)"
class="tag tag-clickable" :class="{ 'tag-selected': selectedTags.includes(tag.name) }"
:title="`搜索标签: ${tag.name} (按住Ctrl键点击选择多个标签，松开Ctrl键搜索)`">
{{ tag.name }}
</button>
</div>
@@ -198,6 +165,7 @@ import artworkService from '@/services/artwork';
import artistService from '@/services/artist';
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';
@@ -231,13 +199,13 @@ const navigationLoading = ref(false);
// 计算属性
const currentImageUrl = computed(() => {
if (!artwork.value) return '';
if (artwork.value.page_count === 1) {
return artwork.value.image_urls.large;
} else if (artwork.value.meta_pages && artwork.value.meta_pages[currentPage.value]) {
return artwork.value.meta_pages[currentPage.value].image_urls.large;
}
return artwork.value.image_urls.large;
});
@@ -275,13 +243,13 @@ const fetchArtworkDetail = async () => {
imageLoaded.value = false;
imageError.value = false;
currentPage.value = 0;
// 清理之前的任务状态
currentTask.value = null;
stopTaskStreaming();
const response = await artworkService.getArtworkDetail(artworkId);
if (response.success && response.data) {
artwork.value = response.data;
// 检查下载状态
@@ -302,9 +270,9 @@ const checkDownloadStatus = async (artworkId: number) => {
try {
checkingDownloadStatus.value = true;
const response = await repositoryStore.checkArtworkDownloaded(artworkId);
console.log('下载状态检查响应:', response);
// repository store的apiCall返回的是data.data，所以response直接是数据对象
if (response && typeof response === 'object') {
isDownloaded.value = response.is_downloaded || false;
@@ -329,10 +297,10 @@ const handleDownload = async () => {
const response = await downloadService.downloadArtwork(artwork.value.id, {
skipExisting
});
if (response.success) {
console.log('下载响应:', response.data);
// 检查是否跳过下载
if (response.data.skipped) {
console.log('作品已存在，跳过下载');
@@ -340,7 +308,7 @@ const handleDownload = async () => {
await checkDownloadStatus(artwork.value.id);
return;
}
// 如果是新任务，开始监听进度
if (response.data.task_id) {
currentTask.value = {
@@ -354,7 +322,7 @@ const handleDownload = async () => {
artwork_id: artwork.value.id,
start_time: new Date().toISOString()
};
// 开始SSE监听任务进度
startTaskStreaming(response.data.task_id);
}
@@ -375,9 +343,9 @@ const startTaskStreaming = (taskId: string) => {
if (sseConnection.value) {
sseConnection.value();
}
console.log('开始SSE监听任务进度:', taskId);
// 建立SSE连接
sseConnection.value = downloadService.streamTaskProgress(
taskId,
@@ -389,14 +357,14 @@ const startTaskStreaming = (taskId: string) => {
completed: task.completed_files,
total: task.total_files
});
currentTask.value = task;
// 如果任务完成，清理连接并检查下载状态
if (['completed', 'failed', 'cancelled', 'partial'].includes(task.status)) {
console.log('任务完成，关闭SSE连接');
stopTaskStreaming();
// 延迟检查下载状态，确保文件写入完成
setTimeout(async () => {
await checkDownloadStatus(artwork.value!.id);
@@ -446,18 +414,8 @@ const formatDate = (dateString: string) => {
return new Date(dateString).toLocaleDateString('zh-CN');
};
// 处理图片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;
};
// 使用统一的图片代理函数
const getImageUrl = getImageProxyUrl;
// 清除错误
const clearError = () => {
@@ -468,23 +426,23 @@ const clearError = () => {
const fetchArtistArtworks = async () => {
const artistId = route.query.artistId;
const artworkType = route.query.artworkType;
if (!artistId || !artworkType) return;
try {
navigationLoading.value = true;
// 获取当前页面信息
const currentPage = parseInt(route.query.page as string) || 1;
const pageSize = 30;
const offset = (currentPage - 1) * pageSize;
const response = await artistService.getArtistArtworks(parseInt(artistId as string), {
type: artworkType as 'art' | 'manga' | 'novel',
offset: offset,
limit: pageSize
});
if (response.success && response.data) {
artistArtworks.value = response.data.artworks;
// 找到当前作品在列表中的位置
@@ -545,18 +503,18 @@ const isCtrlPressed = ref(false);
const handleTagClick = (event: MouseEvent, tagName: string) => {
// 阻止默认行为
event.preventDefault();
console.log('标签点击事件:', {
tagName,
ctrlKey: event.ctrlKey,
metaKey: event.metaKey,
isCtrlPressed: isCtrlPressed.value
});
// 如果按住Ctrl键，则添加到选中状态（不跳转）
if (event.ctrlKey || event.metaKey || isCtrlPressed.value) {
console.log('检测到Ctrl键，添加到选中状态');
// 切换标签的选中状态
const index = selectedTags.value.indexOf(tagName);
if (index > -1) {
@@ -566,19 +524,19 @@ const handleTagClick = (event: MouseEvent, tagName: string) => {
// 如果未选中，则添加到选中列表
selectedTags.value.push(tagName);
}
console.log('当前选中的标签:', selectedTags.value);
// 保存到sessionStorage
sessionStorage.setItem('currentSearchTags', JSON.stringify(selectedTags.value));
// 不跳转，只是更新选中状态
} else {
console.log('普通点击，执行单标签搜索');
// 普通点击，只搜索当前标签，清除之前的多标签选择
selectedTags.value = [];
sessionStorage.removeItem('currentSearchTags');
router.push({
path: '/search',
query: {
@@ -599,11 +557,11 @@ const handleKeyDown = (event: KeyboardEvent) => {
const handleKeyUp = (event: KeyboardEvent) => {
if (event.key === 'Control' || event.key === 'Meta') {
isCtrlPressed.value = false;
// 当松开Ctrl键时，如果有选中的标签，则跳转到搜索页面
if (selectedTags.value.length > 0) {
console.log('松开Ctrl键，跳转到搜索页面，标签:', selectedTags.value);
router.push({
path: '/search',
query: {
@@ -611,7 +569,7 @@ const handleKeyUp = (event: KeyboardEvent) => {
tags: selectedTags.value
}
});
// 清空选中状态
selectedTags.value = [];
sessionStorage.removeItem('currentSearchTags');
@@ -624,10 +582,10 @@ watch(() => route.params.id, () => {
// 清理之前的任务状态
currentTask.value = null;
stopTaskStreaming();
// 重新获取作品详情
fetchArtworkDetail();
// 如果是从作者页面来的，重新获取导航数据
if (showNavigation.value) {
fetchArtistArtworks();
@@ -637,7 +595,7 @@ watch(() => route.params.id, () => {
// 键盘快捷键支持
const handleKeydown = (event: KeyboardEvent) => {
if (!showNavigation.value) return;
if (event.key === 'ArrowLeft' && previousArtwork.value) {
event.preventDefault();
navigateToPrevious();
@@ -655,7 +613,7 @@ onMounted(() => {
if (showNavigation.value) {
fetchArtistArtworks();
}
// 添加键盘事件监听
document.addEventListener('keydown', handleKeydown);
document.addEventListener('keydown', handleKeyDown);
@@ -1089,43 +1047,43 @@ onUnmounted(() => {
.container {
padding: 0 1rem;
}
.artwork-actions {
flex-direction: column;
}
.btn {
width: 100%;
}
.artwork-stats {
flex-direction: column;
gap: 1rem;
}
.thumbnails {
padding: 0.5rem;
}
.thumbnail {
width: 50px;
height: 50px;
}
.artwork-navigation {
flex-direction: column;
gap: 0.75rem;
}
.nav-back {
order: -1;
align-self: flex-start;
min-width: 80px;
}
.nav-prev,
.nav-next {
min-width: auto;
}
}
</style>
</style>