diff --git a/Dockerfile b/Dockerfile index 63b9aea..5cae983 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,19 +1,27 @@ -# ---- 第 1 阶段：安装依赖 ---- -FROM node:20-alpine AS deps +# 多架构构建 Dockerfile +# 使用 Docker Buildx 进行多架构构建： +# docker buildx build --platform linux/amd64,linux/arm64 -t your-image:tag --push . +# 或单一架构构建： +# docker buildx build --platform linux/amd64 -t your-image:tag --load . -# 启用 corepack 并激活 pnpm（Node20 默认提供 corepack） +# 声明构建参数，用于多架构构建 +ARG BUILDPLATFORM +ARG TARGETPLATFORM + +# ---- 第 1 阶段：安装依赖 ---- +FROM --platform=$BUILDPLATFORM node:20-alpine AS deps + +# 启用 corepack 并激活 pnpm RUN corepack enable && corepack prepare pnpm@latest --activate WORKDIR /app -# 仅复制依赖清单，提高构建缓存利用率 -COPY package.json pnpm-lock.yaml ./ -# 安装所有依赖（含 devDependencies，后续会裁剪） +# 安装所有依赖 RUN pnpm install --frozen-lockfile # ---- 第 2 阶段：构建项目 ---- -FROM node:20-alpine AS builder +FROM --platform=$BUILDPLATFORM node:20-alpine AS builder RUN corepack enable && corepack prepare pnpm@latest --activate WORKDIR /app @@ -22,7 +30,6 @@ COPY --from=deps /app/node_modules ./node_modules # 复制全部源代码 COPY . . -# 在构建阶段也显式设置 DOCKER_ENV， ENV DOCKER_ENV=true # 生成生产构建 @@ -44,16 +51,41 @@ ENV DOCKER_ENV=true COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./ # 从构建器中复制 scripts 目录 COPY --from=builder --chown=nextjs:nodejs /app/scripts ./scripts -# 从构建器中复制 start.js +# 从构建器中复制启动脚本和WebSocket相关文件 COPY --from=builder --chown=nextjs:nodejs /app/start.js ./start.js +COPY --from=builder --chown=nextjs:nodejs /app/websocket.js ./websocket.js +COPY --from=builder --chown=nextjs:nodejs /app/production.js ./production.js +COPY --from=builder --chown=nextjs:nodejs /app/production-final.js ./production-final.js +COPY --from=builder --chown=nextjs:nodejs /app/standalone-websocket.js ./standalone-websocket.js # 从构建器中复制 public 和 .next/static 目录 COPY --from=builder --chown=nextjs:nodejs /app/public ./public COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static +# 从构建器中复制 package.json 和 package-lock.json，用于安装额外依赖 +COPY --from=builder --chown=nextjs:nodejs /app/package.json ./package.json +COPY --from=builder --chown=nextjs:nodejs /app/pnpm-lock.yaml ./pnpm-lock.yaml +# 复制 tsconfig.json 以确保路径解析正确 +COPY --from=builder --chown=nextjs:nodejs /app/tsconfig.json ./tsconfig.json -# 切换到非特权用户 +# 安装必要的WebSocket依赖（兼容多架构） +USER root +RUN corepack enable && corepack prepare pnpm@latest --activate && \ + # 使用 --no-optional 避免某些架构下的可选依赖问题 + pnpm install --prod --no-optional ws && \ + # 清理安装缓存减小镜像大小 + pnpm store prune + +# 切回非特权用户 USER nextjs -EXPOSE 3000 +# 暴露HTTP和WebSocket端口 +EXPOSE 3000 3001 -# 使用自定义启动脚本，先预加载配置再启动服务器 -CMD ["node", "start.js"] \ No newline at end of file +# 添加健康检查 +HEALTHCHECK --interval=30s --timeout=10s --start-period=40s --retries=3 \ + CMD curl -f http://localhost:3000/api/health || exit 1 + +# 设置WebSocket端口环境变量 +ENV WS_PORT=3001 + +# 使用最终的生产环境脚本，分离WebSocket服务 +CMD ["node", "production-final.js"] \ No newline at end of file diff --git a/next.config.js b/next.config.js index a7dd3b7..f23704e 100644 --- a/next.config.js +++ b/next.config.js @@ -5,7 +5,7 @@ const nextConfig = { output: 'standalone', eslint: { dirs: ['src'], - ignoreDuringBuilds: process.env.DOCKER_ENV === 'true', + ignoreDuringBuilds: true, // 始终在构建时忽略 ESLint 错误 }, reactStrictMode: false, @@ -59,6 +59,23 @@ const nextConfig = { // Modify the file loader rule to ignore *.svg, since we have it handled now. fileLoaderRule.exclude = /\.svg$/i; + // Add alias configuration to ensure proper path resolution in Docker builds + const path = require('path'); + config.resolve.alias = { + ...config.resolve.alias, + '@': path.resolve(__dirname, 'src'), + '~': path.resolve(__dirname, 'public'), + }; + + // Ensure proper file extension resolution + config.resolve.extensions = ['.ts', '.tsx', '.js', '.jsx', '.json']; + + // Add TypeScript module resolution support + config.resolve.modules = [ + path.resolve(__dirname, 'src'), + 'node_modules' + ]; + config.resolve.fallback = { ...config.resolve.fallback, net: false, diff --git a/nginx.conf b/nginx.conf new file mode 100644 index 0000000..262f447 --- /dev/null +++ b/nginx.conf @@ -0,0 +1,46 @@ +server { + listen 443 ssl; + server_name domain.com; + charset utf-8; + + ssl_certificate /home/cert/tvcertificate.crt; + ssl_certificate_key /home/cert/tvprivate.pem; + + location / { + proxy_pass http://ip:3003; + + # 重要的代理头信息，让 Next.js 服务器知道原始请求的来源 + proxy_set_header Host $host; # 原始主机名 + proxy_set_header X-Real-IP $remote_addr; # 客户端真实 IP + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # 代理链 + proxy_set_header X-Forwarded-Proto $scheme; # 原始协议 (http/https) + proxy_set_header X-Forwarded-Host $host; + proxy_set_header X-Forwarded-Server $host; + } + location /ws-api { + proxy_pass http://ip:3001; + proxy_http_version 1.1; + proxy_set_header Upgrade $http_upgrade; + proxy_set_header Connection "upgrade"; + proxy_set_header Host $host; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; + + # WebSocket 特定的超时设置（长连接） + proxy_connect_timeout 7d; + proxy_send_timeout 7d; + proxy_read_timeout 7d; + + # 禁用缓冲以减少延迟 + proxy_buffering off; + } +} + +server { + listen 80; + + server_name domain.com; + + return 301 https://domain.com$request_uri; +} \ No newline at end of file diff --git a/nginx.conf.example b/nginx.conf.example new file mode 100644 index 0000000..3acb460 --- /dev/null +++ b/nginx.conf.example @@ -0,0 +1,72 @@ +# Nginx配置示例，用于生产环境反向代理 +# 将此文件放置在 /etc/nginx/sites-available/ 并创建符号链接到 sites-enabled/ + +upstream nextjs_app { + server localhost:3000; +} + +upstream websocket_app { + server localhost:3001; +} + +server { + listen 80; + server_name your-domain.com; + + # 如果使用HTTPS，取消下面的注释并配置SSL证书 + # listen 443 ssl; + # ssl_certificate /path/to/ssl/cert.pem; + # ssl_certificate_key /path/to/ssl/key.pem; + + # 增加请求体大小限制 + client_max_body_size 100M; + + # Next.js应用的主要路由 + location / { + proxy_pass http://nextjs_app; + proxy_http_version 1.1; + proxy_set_header Upgrade $http_upgrade; + proxy_set_header Connection 'upgrade'; + proxy_set_header Host $host; + proxy_cache_bypass $http_upgrade; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; + } + + # WebSocket专用路由 + location /ws-api { + proxy_pass http://websocket_app; + proxy_http_version 1.1; + proxy_set_header Upgrade $http_upgrade; + proxy_set_header Connection "upgrade"; + proxy_set_header Host $host; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; + + # WebSocket特定的超时设置 + proxy_connect_timeout 7d; + proxy_send_timeout 7d; + proxy_read_timeout 7d; + } + + # 静态资源缓存 + location /_next/static { + proxy_pass http://nextjs_app; + proxy_cache_valid 60m; + add_header Cache-Control "public, immutable"; + } + + location /public { + proxy_pass http://nextjs_app; + proxy_cache_valid 60m; + add_header Cache-Control "public, max-age=3600"; + } +} + + + + + + diff --git a/package.json b/package.json index 432a500..b29795c 100644 --- a/package.json +++ b/package.json @@ -3,9 +3,15 @@ "version": "0.1.0", "private": true, "scripts": { - "dev": "pnpm gen:manifest && next dev -H 0.0.0.0", + "dev": "pnpm gen:manifest && node simple-dev.js", + "dev:complex": "pnpm gen:manifest && node dev-server.js", + "dev:ws": "node standalone-websocket.js", + "test:ws": "node test-websocket-connection.js", + "debug:api": "node debug-api.js", "build": "pnpm gen:manifest && next build", - "start": "next start", + "start": "NODE_ENV=production node server.js", + "prod": "NODE_ENV=production node production.js", + "prod:final": "NODE_ENV=production node production-final.js", "lint": "next lint", "lint:fix": "eslint src --fix && pnpm format", "lint:strict": "eslint --max-warnings=0 src", @@ -26,6 +32,7 @@ "@headlessui/react": "^2.2.4", "@heroicons/react": "^2.2.0", "@types/crypto-js": "^4.2.2", + "@types/ws": "^8.18.1", "@upstash/redis": "^1.25.0", "@vidstack/react": "^1.12.13", "artplayer": "^5.2.5", @@ -38,7 +45,7 @@ "hls.js": "^1.6.10", "lucide-react": "^0.438.0", "media-icons": "^1.1.5", - "next": "^14.2.23", + "next": "^14.2.30", "next-pwa": "^5.6.0", "next-themes": "^0.4.6", "react": "^18.2.0", @@ -49,6 +56,7 @@ "swiper": "^11.2.8", "tailwind-merge": "^2.6.0", "vidstack": "^0.6.15", + "ws": "^8.18.3", "zod": "^3.24.1" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 65180fe..33e47e9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -29,6 +29,9 @@ importers: '@types/crypto-js': specifier: ^4.2.2 version: 4.2.2 + '@types/ws': + specifier: ^8.18.1 + version: 8.18.1 '@upstash/redis': specifier: ^1.25.0 version: 1.35.1 @@ -66,7 +69,7 @@ importers: specifier: ^1.1.5 version: 1.1.5 next: - specifier: ^14.2.23 + specifier: ^14.2.30 version: 14.2.30(@babel/core@7.27.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) next-pwa: specifier: ^5.6.0 @@ -98,6 +101,9 @@ importers: vidstack: specifier: ^0.6.15 version: 0.6.15 + ws: + specifier: ^8.18.3 + version: 8.18.3 zod: specifier: ^3.24.1 version: 3.25.67 @@ -1583,6 +1589,9 @@ packages: '@types/validator@13.15.3': resolution: {integrity: sha512-7bcUmDyS6PN3EuD9SlGGOxM77F8WLVsrwkxyWxKnxzmXoequ6c7741QBrANq6htVRGOITJ7z72mTP6Z4XyuG+Q==} + '@types/ws@8.18.1': + resolution: {integrity: sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==} + '@types/yargs-parser@21.0.3': resolution: {integrity: sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==} @@ -5266,6 +5275,18 @@ packages: utf-8-validate: optional: true + ws@8.18.3: + resolution: {integrity: sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==} + engines: {node: '>=10.0.0'} + peerDependencies: + bufferutil: ^4.0.1 + utf-8-validate: '>=5.0.2' + peerDependenciesMeta: + bufferutil: + optional: true + utf-8-validate: + optional: true + xml-name-validator@3.0.0: resolution: {integrity: sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==} @@ -7060,6 +7081,10 @@ snapshots: '@types/validator@13.15.3': {} + '@types/ws@8.18.1': + dependencies: + '@types/node': 24.0.3 + '@types/yargs-parser@21.0.3': {} '@types/yargs@16.0.9': @@ -9880,7 +9905,7 @@ snapshots: '@next/env': 14.2.30 '@swc/helpers': 0.5.5 busboy: 1.6.0 - caniuse-lite: 1.0.30001723 + caniuse-lite: 1.0.30001741 graceful-fs: 4.2.11 postcss: 8.4.31 react: 18.3.1 @@ -11371,6 +11396,8 @@ snapshots: ws@7.5.10: {} + ws@8.18.3: {} + xml-name-validator@3.0.0: {} xmlchars@2.2.0: {} diff --git a/production-final.js b/production-final.js new file mode 100644 index 0000000..c88faed --- /dev/null +++ b/production-final.js @@ -0,0 +1,176 @@ +/** + * 最终的生产环境启动文件 + * 分离Next.js和WebSocket服务器，避免任何冲突 + */ +process.env.NODE_ENV = 'production'; + +const path = require('path'); +const http = require('http'); + +// 调用 generate-manifest.js 生成 manifest.json +function generateManifest() { + console.log('Generating manifest.json for Docker deployment...'); + + try { + const generateManifestScript = path.join( + __dirname, + 'scripts', + 'generate-manifest.js' + ); + require(generateManifestScript); + } catch (error) { + console.error('❌ Error calling generate-manifest.js:', error); + throw error; + } +} + +// 生成manifest +generateManifest(); + +// 启动独立的WebSocket服务器 +const { createStandaloneWebSocketServer, getOnlineUsers, sendMessageToUsers } = require('./standalone-websocket'); +const wsPort = process.env.WS_PORT || 3001; +const wss = createStandaloneWebSocketServer(wsPort); + +// 将WebSocket函数存储到全局对象，供API路由使用 +global.getOnlineUsers = getOnlineUsers; +global.sendMessageToUsers = sendMessageToUsers; + +// 启动Next.js standalone服务器 +console.log('Starting Next.js production server...'); +const nextServerPath = path.join(__dirname, 'server.js'); + +// 检查是否存在standalone server.js +const fs = require('fs'); +if (fs.existsSync(nextServerPath)) { + // Docker环境，使用standalone server + require(nextServerPath); +} else { + // 非Docker环境，使用标准Next.js启动 + const { createServer } = require('http'); + const { parse } = require('url'); + const next = require('next'); + + const hostname = process.env.HOSTNAME || '0.0.0.0'; + const port = process.env.PORT || 3000; + + const app = next({ + dev: false, + hostname, + port + }); + + const handle = app.getRequestHandler(); + + app.prepare().then(() => { + const server = createServer(async (req, res) => { + try { + const parsedUrl = parse(req.url, true); + await handle(req, res, parsedUrl); + } catch (err) { + console.error('处理请求时出错:', req.url, err); + res.statusCode = 500; + res.end('内部服务器错误'); + } + }); + + server.listen(port, (err) => { + if (err) throw err; + console.log(`> Next.js服务已启动: http://${hostname}:${port}`); + setupServerTasks(); + }); + }); +} + +// 设置服务器启动后的任务 +function setupServerTasks() { + const httpPort = process.env.PORT || 3000; + const hostname = process.env.HOSTNAME || 'localhost'; + + // 每1秒轮询一次，直到请求成功 + const TARGET_URL = `http://${hostname}:${httpPort}/login`; + + const intervalId = setInterval(() => { + console.log(`Fetching ${TARGET_URL} ...`); + + const req = http.get(TARGET_URL, (res) => { + // 当返回2xx状态码时认为成功，然后停止轮询 + if (res.statusCode && res.statusCode >= 200 && res.statusCode < 300) { + console.log('Server is up, stop polling.'); + clearInterval(intervalId); + + setTimeout(() => { + // 服务器启动后，立即执行一次cron任务 + executeCronJob(); + }, 3000); + + // 然后设置每小时执行一次cron任务 + setInterval(() => { + executeCronJob(); + }, 60 * 60 * 1000); // 每小时执行一次 + + // 显示服务状态 + console.log('===================================='); + console.log(`✅ Next.js服务运行在: http://${hostname}:${httpPort}`); + console.log(`✅ WebSocket服务运行在: ws://${hostname}:${wsPort}`); + console.log('===================================='); + } + }); + + req.setTimeout(2000, () => { + req.destroy(); + }); + + req.on('error', () => { + // 忽略连接错误，继续轮询 + }); + }, 1000); +} + +// 执行cron任务的函数 +function executeCronJob() { + const httpPort = process.env.PORT || 3000; + const hostname = process.env.HOSTNAME || 'localhost'; + const cronUrl = `http://${hostname}:${httpPort}/api/cron`; + + console.log(`Executing cron job: ${cronUrl}`); + + const req = http.get(cronUrl, (res) => { + let data = ''; + + res.on('data', (chunk) => { + data += chunk; + }); + + res.on('end', () => { + if (res.statusCode && res.statusCode >= 200 && res.statusCode < 300) { + console.log('Cron job executed successfully:', data); + } else { + console.error('Cron job failed:', res.statusCode, data); + } + }); + }); + + req.on('error', (err) => { + console.error('Error executing cron job:', err); + }); + + req.setTimeout(30000, () => { + console.error('Cron job timeout'); + req.destroy(); + }); +} + +// 如果直接运行此文件，设置任务 +if (require.main === module) { + // 延迟启动任务，等待服务器完全启动 + setTimeout(() => { + setupServerTasks(); + }, 5000); +} + + + + + + diff --git a/production.js b/production.js new file mode 100644 index 0000000..b99fb50 --- /dev/null +++ b/production.js @@ -0,0 +1,178 @@ +/** + * 生产模式下的服务器入口 + * 使用 NODE_ENV=production node production.js 来启动 + */ +process.env.NODE_ENV = 'production'; + +const { createServer } = require('http'); +const { parse } = require('url'); +const next = require('next'); +const path = require('path'); +const http = require('http'); +const { createWebSocketServer } = require('./websocket'); + +// 调用 generate-manifest.js 生成 manifest.json +function generateManifest() { + console.log('Generating manifest.json for Docker deployment...'); + + try { + const generateManifestScript = path.join( + __dirname, + 'scripts', + 'generate-manifest.js' + ); + require(generateManifestScript); + } catch (error) { + console.error('❌ Error calling generate-manifest.js:', error); + throw error; + } +} + +// 生成manifest +generateManifest(); + +const hostname = process.env.HOSTNAME || '0.0.0.0'; +const port = process.env.PORT || 3000; + +// 在生产模式下初始化 Next.js +const app = next({ + dev: false, + hostname, + port +}); + +const handle = app.getRequestHandler(); + +app.prepare().then(() => { + const server = createServer(async (req, res) => { + try { + // 检查是否是WebSocket升级请求，如果是则跳过Next.js处理 + const upgrade = req.headers.upgrade; + if (upgrade && upgrade.toLowerCase() === 'websocket') { + // 不处理WebSocket升级请求，让upgrade事件处理器处理 + return; + } + + // 使用Next.js处理所有非WebSocket请求 + const parsedUrl = parse(req.url, true); + await handle(req, res, parsedUrl); + } catch (err) { + console.error('处理请求时出错:', req.url, err); + res.statusCode = 500; + res.end('内部服务器错误'); + } + }); + + // 初始化 WebSocket 服务器 + const wss = createWebSocketServer(); + + // 将 WebSocket 服务器实例存储到全局对象中，供 API 路由使用 + global.wss = wss; + + // 使用WeakSet来跟踪已处理的socket，避免重复处理 + const handledSockets = new WeakSet(); + + // 处理 WebSocket 升级请求 + server.on('upgrade', (request, socket, head) => { + // 如果socket已经被处理过，直接返回 + if (handledSockets.has(socket)) { + return; + } + + const pathname = parse(request.url).pathname; + + if (pathname === '/ws') { + console.log('处理 WebSocket 升级请求:', pathname); + + // 标记socket已被处理 + handledSockets.add(socket); + + // 处理WebSocket连接 + try { + wss.handleUpgrade(request, socket, head, (ws) => { + wss.emit('connection', ws, request); + }); + } catch (error) { + console.error('WebSocket升级错误:', error); + socket.destroy(); + } + } else { + console.log('未知的升级请求路径:', pathname); + // 不销毁socket，让它自然关闭 + } + }); + + // 启动服务器 + server.listen(port, (err) => { + if (err) throw err; + console.log(`> 服务已启动 (生产模式): http://${hostname}:${port}`); + console.log(`> WebSocket 服务已启动: ws://${hostname}:${port}/ws`); + + // 设置服务器启动后的任务 + setupServerTasks(); + }); +}); + +// 设置服务器启动后的任务 +function setupServerTasks() { + // 每 1 秒轮询一次，直到请求成功 + const TARGET_URL = `http://${process.env.HOSTNAME || 'localhost'}:${process.env.PORT || 3000}/login`; + + const intervalId = setInterval(() => { + console.log(`Fetching ${TARGET_URL} ...`); + + const req = http.get(TARGET_URL, (res) => { + // 当返回 2xx 状态码时认为成功，然后停止轮询 + if (res.statusCode && res.statusCode >= 200 && res.statusCode < 300) { + console.log('Server is up, stop polling.'); + clearInterval(intervalId); + + setTimeout(() => { + // 服务器启动后，立即执行一次 cron 任务 + executeCronJob(); + }, 3000); + + // 然后设置每小时执行一次 cron 任务 + setInterval(() => { + executeCronJob(); + }, 60 * 60 * 1000); // 每小时执行一次 + } + }); + + req.setTimeout(2000, () => { + req.destroy(); + }); + }, 1000); +} + +// 执行 cron 任务的函数 +function executeCronJob() { + const cronUrl = `http://${process.env.HOSTNAME || 'localhost'}:${process.env.PORT || 3000}/api/cron`; + + console.log(`Executing cron job: ${cronUrl}`); + + const req = http.get(cronUrl, (res) => { + let data = ''; + + res.on('data', (chunk) => { + data += chunk; + }); + + res.on('end', () => { + if (res.statusCode && res.statusCode >= 200 && res.statusCode < 300) { + console.log('Cron job executed successfully:', data); + } else { + console.error('Cron job failed:', res.statusCode, data); + } + }); + }); + + req.on('error', (err) => { + console.error('Error executing cron job:', err); + }); + + req.setTimeout(30000, () => { + console.error('Cron job timeout'); + req.destroy(); + }); +} diff --git a/server.js b/server.js new file mode 100644 index 0000000..69b7caf --- /dev/null +++ b/server.js @@ -0,0 +1,70 @@ +const { createServer } = require('http'); +const { parse } = require('url'); +const next = require('next'); +const { createWebSocketServer } = require('./websocket'); + +const dev = process.env.NODE_ENV !== 'production'; +const hostname = 'localhost'; +const port = process.env.PORT || 3000; + +// 当使用Next.js时，需要预准备应用程序 +const app = next({ dev, hostname, port }); +const handle = app.getRequestHandler(); + +app.prepare().then(() => { + const server = createServer(async (req, res) => { + try { + // 使用Next.js处理所有请求 + const parsedUrl = parse(req.url, true); + await handle(req, res, parsedUrl); + } catch (err) { + console.error('Error occurred handling', req.url, err); + res.statusCode = 500; + res.end('internal server error'); + } + }); + + // 初始化 WebSocket 服务器 + const wss = createWebSocketServer(server); + + // 将 WebSocket 服务器实例及相关方法存储到全局对象中，供 API 路由使用 + global.wss = wss; + + // 使用一个标志确保每个连接只被处理一次 + const upgradedSockets = new WeakSet(); + + // 直接处理 WebSocket 升级请求 + server.on('upgrade', (request, socket, head) => { + // 如果这个 socket 已经被处理过，就忽略它 + if (upgradedSockets.has(socket)) { + return; + } + + const pathname = parse(request.url).pathname; + + if (pathname === '/ws') { + console.log('处理 WebSocket 升级请求:', pathname); + try { + // 标记这个 socket 已经被处理 + upgradedSockets.add(socket); + + wss.handleUpgrade(request, socket, head, (ws) => { + wss.emit('connection', ws, request); + }); + } catch (error) { + console.error('WebSocket 升级处理错误:', error); + socket.write('HTTP/1.1 500 Internal Server Error\r\n\r\n'); + socket.destroy(); + } + } else { + console.log('非 WebSocket 升级请求:', pathname); + // Next.js 会自己处理这些请求，无需销毁 socket + } + }); + + server.listen(port, (err) => { + if (err) throw err; + console.log(`> Ready on http://${hostname}:${port}`); + console.log(`> WebSocket server ready on ws://${hostname}:${port}/ws`); + }); +}); \ No newline at end of file diff --git a/simple-dev.js b/simple-dev.js new file mode 100644 index 0000000..622c72f --- /dev/null +++ b/simple-dev.js @@ -0,0 +1,54 @@ +const { createServer } = require('http'); +const { parse } = require('url'); +const next = require('next'); + +const dev = process.env.NODE_ENV !== 'production'; +const hostname = 'localhost'; +const port = 3000; +const wsPort = 3001; + +// 启动独立WebSocket服务器 +console.log('🔌 启动 WebSocket 服务器...'); +const { createStandaloneWebSocketServer } = require('./standalone-websocket'); +createStandaloneWebSocketServer(wsPort); + +// 启动Next.js +const app = next({ dev, hostname, port }); +const handle = app.getRequestHandler(); + +app.prepare().then(() => { + const server = createServer(async (req, res) => { + try { + const parsedUrl = parse(req.url, true); + await handle(req, res, parsedUrl); + } catch (err) { + console.error('Error occurred handling', req.url, err); + res.statusCode = 500; + res.end('internal server error'); + } + }); + + server.listen(port, (err) => { + if (err) throw err; + console.log(`🌐 Next.js ready on http://${hostname}:${port}`); + console.log(`🔌 WebSocket ready on ws://${hostname}:${wsPort}/ws`); + console.log('\n✅ 开发环境已启动！按 Ctrl+C 停止服务器'); + }); + + // 优雅关闭 + const cleanup = () => { + console.log('\n🛑 正在关闭服务器...'); + server.close(() => { + process.exit(0); + }); + }; + + process.on('SIGINT', cleanup); + process.on('SIGTERM', cleanup); +}); + + + + + + diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx index 3d873af..9b68ddf 100644 --- a/src/app/admin/page.tsx +++ b/src/app/admin/page.tsx @@ -43,7 +43,7 @@ import Image from 'next/image'; import { Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; -import { AdminConfig, AdminConfigResult } from '@/lib/admin.types'; +import { AdminConfig, AdminConfigResult } from '../../lib/admin.types'; import { getAuthInfoFromBrowserCookie } from '@/lib/auth'; import DataMigration from '@/components/DataMigration'; diff --git a/src/app/api/avatar/route.ts b/src/app/api/avatar/route.ts index 1384e9d..b6ea89c 100644 --- a/src/app/api/avatar/route.ts +++ b/src/app/api/avatar/route.ts @@ -16,14 +16,9 @@ export async function GET(request: NextRequest) { const { searchParams } = new URL(request.url); const targetUser = searchParams.get('user') || authInfo.username; - // 只允许获取自己的头像，管理员和站长可以获取任何用户的头像 - const canAccess = targetUser === authInfo.username || - authInfo.role === 'admin' || - authInfo.role === 'owner'; - - if (!canAccess) { - return NextResponse.json({ error: 'Permission denied' }, { status: 403 }); - } + // 在聊天系统中，用户应该能够查看其他用户的头像，这对聊天功能是必要的 + // 只要是已认证用户，就可以查看任何用户的头像 + // 这对于聊天、好友功能等社交功能是必要的 const avatar = await db.getUserAvatar(targetUser); diff --git a/src/app/api/chat/conversations/route.ts b/src/app/api/chat/conversations/route.ts new file mode 100644 index 0000000..50c9325 --- /dev/null +++ b/src/app/api/chat/conversations/route.ts @@ -0,0 +1,59 @@ +import { NextRequest, NextResponse } from 'next/server'; +import { db } from '../../../../lib/db'; +import { Conversation } from '../../../../lib/types'; +import { getAuthInfoFromCookie } from '../../../../lib/auth'; + +export async function GET(request: NextRequest) { + try { + const authInfo = getAuthInfoFromCookie(request); + if (!authInfo || !authInfo.username) { + return NextResponse.json({ error: '未授权' }, { status: 401 }); + } + + const conversations = await db.getConversations(authInfo.username); + return NextResponse.json(conversations); + } catch (error) { + console.error('Error loading conversations:', error); + return NextResponse.json({ error: '获取对话列表失败' }, { status: 500 }); + } +} + +export async function POST(request: NextRequest) { + try { + const authInfo = getAuthInfoFromCookie(request); + if (!authInfo || !authInfo.username) { + return NextResponse.json({ error: '未授权' }, { status: 401 }); + } + + const { participants, name, type } = await request.json(); + + if (!participants || !Array.isArray(participants) || participants.length === 0) { + return NextResponse.json({ error: '参与者列表不能为空' }, { status: 400 }); + } + + // 确保当前用户在参与者列表中 + if (!participants.includes(authInfo.username)) { + participants.push(authInfo.username); + } + + // 根据参与者数量确定对话类型 + const conversationType = type || (participants.length > 2 ? 'group' : 'private'); + const isGroup = conversationType === 'group'; + + const conversation: Conversation = { + id: `conv_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`, + name: name || participants.filter(p => p !== authInfo.username).join(', '), + participants, + type: conversationType, + created_at: Date.now(), + updated_at: Date.now(), + is_group: isGroup, + }; + + await db.createConversation(conversation); + return NextResponse.json(conversation, { status: 201 }); + } catch (error) { + console.error('Error creating conversation:', error); + return NextResponse.json({ error: '创建对话失败' }, { status: 500 }); + } +} diff --git a/src/app/api/chat/friend-requests/route.ts b/src/app/api/chat/friend-requests/route.ts new file mode 100644 index 0000000..fc95ba4 --- /dev/null +++ b/src/app/api/chat/friend-requests/route.ts @@ -0,0 +1,130 @@ +import { NextRequest, NextResponse } from 'next/server'; +import { db } from '../../../../lib/db'; +import { FriendRequest, Friend } from '../../../../lib/types'; +import { getAuthInfoFromCookie } from '../../../../lib/auth'; + +export async function GET(request: NextRequest) { + try { + const authInfo = getAuthInfoFromCookie(request); + if (!authInfo || !authInfo.username) { + return NextResponse.json({ error: '未授权' }, { status: 401 }); + } + + const friendRequests = await db.getFriendRequests(authInfo.username); + return NextResponse.json(friendRequests); + } catch (error) { + console.error('Error loading friend requests:', error); + return NextResponse.json({ error: '获取好友申请失败' }, { status: 500 }); + } +} + +export async function POST(request: NextRequest) { + try { + const authInfo = getAuthInfoFromCookie(request); + if (!authInfo || !authInfo.username) { + return NextResponse.json({ error: '未授权' }, { status: 401 }); + } + + const { to_user, message } = await request.json(); + + if (!to_user) { + return NextResponse.json({ error: '目标用户不能为空' }, { status: 400 }); + } + + // 检查目标用户是否存在 + const userExists = await db.checkUserExist(to_user); + if (!userExists) { + return NextResponse.json({ error: '目标用户不存在' }, { status: 404 }); + } + + // 检查是否已经是好友 + const friends = await db.getFriends(authInfo.username); + const isAlreadyFriend = friends.some(friend => friend.username === to_user); + if (isAlreadyFriend) { + return NextResponse.json({ error: '已经是好友' }, { status: 400 }); + } + + // 检查是否已经有pending的申请 + const existingRequests = await db.getFriendRequests(to_user); + const hasPendingRequest = existingRequests.some( + req => req.from_user === authInfo.username && req.status === 'pending' + ); + if (hasPendingRequest) { + return NextResponse.json({ error: '已有待处理的好友申请' }, { status: 400 }); + } + + const friendRequest: FriendRequest = { + id: `req_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`, + from_user: authInfo.username, + to_user, + message: message || '请求添加您为好友', + status: 'pending', + created_at: Date.now(), + updated_at: Date.now(), + }; + + await db.createFriendRequest(friendRequest); + return NextResponse.json(friendRequest, { status: 201 }); + } catch (error) { + console.error('Error creating friend request:', error); + return NextResponse.json({ error: '发送好友申请失败' }, { status: 500 }); + } +} + +export async function PUT(request: NextRequest) { + try { + const authInfo = getAuthInfoFromCookie(request); + if (!authInfo || !authInfo.username) { + return NextResponse.json({ error: '未授权' }, { status: 401 }); + } + + const { requestId, status } = await request.json(); + + if (!requestId || !status || !['accepted', 'rejected'].includes(status)) { + return NextResponse.json({ error: '请求参数无效' }, { status: 400 }); + } + + // 获取申请信息 + const allRequests = await db.getFriendRequests(authInfo.username); + const friendRequest = allRequests.find(req => req.id === requestId && req.to_user === authInfo.username); + + if (!friendRequest) { + return NextResponse.json({ error: '好友申请不存在' }, { status: 404 }); + } + + if (friendRequest.status !== 'pending') { + return NextResponse.json({ error: '申请已处理' }, { status: 400 }); + } + + // 更新申请状态 + await db.updateFriendRequest(requestId, status); + + // 如果接受申请，添加为好友 + if (status === 'accepted') { + const friend1: Friend = { + id: `friend_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`, + username: friendRequest.from_user, + status: 'offline', + added_at: Date.now(), + }; + + const friend2: Friend = { + id: `friend_${Date.now() + 1}_${Math.random().toString(36).substr(2, 9)}`, + username: authInfo.username, + status: 'offline', + added_at: Date.now(), + }; + + // 双向添加好友 + await Promise.all([ + db.addFriend(authInfo.username, friend1), + db.addFriend(friendRequest.from_user, friend2), + ]); + } + + return NextResponse.json({ success: true }); + } catch (error) { + console.error('Error handling friend request:', error); + return NextResponse.json({ error: '处理好友申请失败' }, { status: 500 }); + } +} diff --git a/src/app/api/chat/friends/route.ts b/src/app/api/chat/friends/route.ts new file mode 100644 index 0000000..095ca26 --- /dev/null +++ b/src/app/api/chat/friends/route.ts @@ -0,0 +1,83 @@ +import { NextRequest, NextResponse } from 'next/server'; +import { db } from '../../../../lib/db'; +import { Friend } from '../../../../lib/types'; +import { getAuthInfoFromCookie } from '../../../../lib/auth'; + +export async function GET(request: NextRequest) { + try { + const authInfo = getAuthInfoFromCookie(request); + if (!authInfo || !authInfo.username) { + return NextResponse.json({ error: '未授权' }, { status: 401 }); + } + + const friends = await db.getFriends(authInfo.username); + return NextResponse.json(friends); + } catch (error) { + console.error('Error loading friends:', error); + return NextResponse.json({ error: '获取好友列表失败' }, { status: 500 }); + } +} + +export async function POST(request: NextRequest) { + try { + const authInfo = getAuthInfoFromCookie(request); + if (!authInfo || !authInfo.username) { + return NextResponse.json({ error: '未授权' }, { status: 401 }); + } + + const { username, nickname } = await request.json(); + + if (!username) { + return NextResponse.json({ error: '用户名不能为空' }, { status: 400 }); + } + + // 检查用户是否存在 + const userExists = await db.checkUserExist(username); + if (!userExists) { + return NextResponse.json({ error: '用户不存在' }, { status: 404 }); + } + + // 检查是否已经是好友 + const friends = await db.getFriends(authInfo.username); + const isAlreadyFriend = friends.some(friend => friend.username === username); + if (isAlreadyFriend) { + return NextResponse.json({ error: '已经是好友' }, { status: 400 }); + } + + const friend: Friend = { + id: `friend_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`, + username, + nickname, + status: 'offline', + added_at: Date.now(), + }; + + await db.addFriend(authInfo.username, friend); + return NextResponse.json(friend, { status: 201 }); + } catch (error) { + console.error('Error adding friend:', error); + return NextResponse.json({ error: '添加好友失败' }, { status: 500 }); + } +} + +export async function DELETE(request: NextRequest) { + try { + const authInfo = getAuthInfoFromCookie(request); + if (!authInfo || !authInfo.username) { + return NextResponse.json({ error: '未授权' }, { status: 401 }); + } + + const { searchParams } = new URL(request.url); + const friendId = searchParams.get('friendId'); + + if (!friendId) { + return NextResponse.json({ error: '好友 ID 不能为空' }, { status: 400 }); + } + + await db.removeFriend(authInfo.username, friendId); + return NextResponse.json({ success: true }); + } catch (error) { + console.error('Error removing friend:', error); + return NextResponse.json({ error: '删除好友失败' }, { status: 500 }); + } +} diff --git a/src/app/api/chat/messages/route.ts b/src/app/api/chat/messages/route.ts new file mode 100644 index 0000000..92cac13 --- /dev/null +++ b/src/app/api/chat/messages/route.ts @@ -0,0 +1,134 @@ +import { NextRequest, NextResponse } from 'next/server'; +import { db } from '../../../../lib/db'; +import { ChatMessage } from '../../../../lib/types'; +import { getAuthInfoFromCookie } from '../../../../lib/auth'; + +export async function GET(request: NextRequest) { + try { + const authInfo = getAuthInfoFromCookie(request); + if (!authInfo || !authInfo.username) { + console.log('未授权访问消息API:', authInfo); + return NextResponse.json({ error: '未授权' }, { status: 401 }); + } + + const { searchParams } = new URL(request.url); + const conversationId = searchParams.get('conversationId'); + const limit = parseInt(searchParams.get('limit') || '50'); + const offset = parseInt(searchParams.get('offset') || '0'); + + if (!conversationId) { + console.log('缺少对话ID参数'); + return NextResponse.json({ error: '对话 ID 不能为空' }, { status: 400 }); + } + + console.log('加载消息 - 用户:', authInfo.username, '对话ID:', conversationId); + + // 验证用户是否有权限访问此对话 + let conversation; + try { + conversation = await db.getConversation(conversationId); + console.log('对话查询结果:', conversation ? '找到对话' : '对话不存在'); + } catch (dbError) { + console.error('数据库查询对话失败:', dbError); + return NextResponse.json({ + error: '数据库查询失败', + details: process.env.NODE_ENV === 'development' ? (dbError as Error).message : undefined + }, { status: 500 }); + } + + if (!conversation) { + console.log('对话不存在:', conversationId); + return NextResponse.json({ error: '对话不存在' }, { status: 404 }); + } + + if (!conversation.participants.includes(authInfo.username)) { + console.log('用户无权限访问对话:', authInfo.username, '参与者:', conversation.participants); + return NextResponse.json({ error: '无权限访问此对话' }, { status: 403 }); + } + + try { + const messages = await db.getMessages(conversationId, limit, offset); + console.log(`成功加载 ${messages.length} 条消息`); + return NextResponse.json(messages); + } catch (dbError) { + console.error('数据库查询消息失败:', dbError); + return NextResponse.json({ + error: '获取消息失败', + details: process.env.NODE_ENV === 'development' ? (dbError as Error).message : undefined + }, { status: 500 }); + } + + } catch (error) { + console.error('加载消息API发生未知错误:', error); + return NextResponse.json({ + error: '获取消息失败', + details: process.env.NODE_ENV === 'development' ? (error as Error).message : undefined + }, { status: 500 }); + } +} + +export async function POST(request: NextRequest) { + try { + const authInfo = getAuthInfoFromCookie(request); + if (!authInfo || !authInfo.username) { + return NextResponse.json({ error: '未授权' }, { status: 401 }); + } + + const messageData = await request.json(); + + if (!messageData.conversation_id || !messageData.content) { + return NextResponse.json({ error: '对话 ID 和消息内容不能为空' }, { status: 400 }); + } + + // 验证用户是否有权限发送消息到此对话 + const conversation = await db.getConversation(messageData.conversation_id); + if (!conversation || !conversation.participants.includes(authInfo.username)) { + return NextResponse.json({ error: '无权限发送消息到此对话' }, { status: 403 }); + } + + const message: ChatMessage = { + id: `msg_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`, + conversation_id: messageData.conversation_id, + sender_id: authInfo.username, + sender_name: authInfo.username, + content: messageData.content, + message_type: messageData.message_type || 'text', + timestamp: Date.now(), + is_read: false, + }; + + await db.saveMessage(message); + + // 更新对话的最后消息和更新时间 + await db.updateConversation(messageData.conversation_id, { + last_message: message, + updated_at: Date.now(), + }); + + return NextResponse.json(message, { status: 201 }); + } catch (error) { + console.error('Error sending message:', error); + return NextResponse.json({ error: '发送消息失败' }, { status: 500 }); + } +} + +export async function PUT(request: NextRequest) { + try { + const authInfo = getAuthInfoFromCookie(request); + if (!authInfo || !authInfo.username) { + return NextResponse.json({ error: '未授权' }, { status: 401 }); + } + + const { messageId } = await request.json(); + + if (!messageId) { + return NextResponse.json({ error: '消息 ID 不能为空' }, { status: 400 }); + } + + await db.markMessageAsRead(messageId); + return NextResponse.json({ success: true }); + } catch (error) { + console.error('Error marking message as read:', error); + return NextResponse.json({ error: '标记消息已读失败' }, { status: 500 }); + } +} diff --git a/src/app/api/chat/online-users/route.ts b/src/app/api/chat/online-users/route.ts new file mode 100644 index 0000000..a64bff8 --- /dev/null +++ b/src/app/api/chat/online-users/route.ts @@ -0,0 +1,32 @@ +import { NextRequest, NextResponse } from 'next/server'; +import { getAuthInfoFromCookie } from '../../../../lib/auth'; + +// 从全局对象获取WebSocket实例相关方法 +function getOnlineUsers(): string[] { + try { + if ((global as any).wss) { + // 假设websocket.js中导出了getOnlineUsers方法并附加到了wss对象上 + return require('../../../../../websocket').getOnlineUsers(); + } + return []; + } catch (error) { + console.error('获取在线用户失败:', error); + return []; + } +} + +// 获取在线用户列表 +export async function GET(request: NextRequest) { + try { + const authInfo = getAuthInfoFromCookie(request); + if (!authInfo || !authInfo.username) { + return NextResponse.json({ error: '未授权' }, { status: 401 }); + } + + const onlineUsers = getOnlineUsers(); + return NextResponse.json({ onlineUsers }); + } catch (error) { + console.error('获取在线用户失败:', error); + return NextResponse.json({ error: '获取在线用户失败' }, { status: 500 }); + } +} diff --git a/src/app/api/chat/search-users/route.ts b/src/app/api/chat/search-users/route.ts new file mode 100644 index 0000000..3d7f74a --- /dev/null +++ b/src/app/api/chat/search-users/route.ts @@ -0,0 +1,39 @@ +import { NextRequest, NextResponse } from 'next/server'; +import { db } from '../../../../lib/db'; +import { getAuthInfoFromCookie } from '../../../../lib/auth'; + +export async function GET(request: NextRequest) { + try { + const authInfo = getAuthInfoFromCookie(request); + if (!authInfo || !authInfo.username) { + return NextResponse.json({ error: '未授权' }, { status: 401 }); + } + + const { searchParams } = new URL(request.url); + const query = searchParams.get('q'); + + if (!query || query.trim().length < 2) { + return NextResponse.json({ error: '搜索关键词至少需要2个字符' }, { status: 400 }); + } + + // 获取所有用户并进行模糊匹配 + const allUsers = await db.getAllUsers(); + const matchedUsers = allUsers.filter(username => + username.toLowerCase().includes(query.toLowerCase()) && + username !== authInfo.username // 排除自己 + ); + + // 转换为Friend格式返回 + const userResults = matchedUsers.map(username => ({ + id: username, + username, + status: 'offline' as const, + added_at: 0, + })); + + return NextResponse.json(userResults); + } catch (error) { + console.error('Error searching users:', error); + return NextResponse.json({ error: '搜索用户失败' }, { status: 500 }); + } +} diff --git a/src/app/api/chat/send-message/route.ts b/src/app/api/chat/send-message/route.ts new file mode 100644 index 0000000..8c3786e --- /dev/null +++ b/src/app/api/chat/send-message/route.ts @@ -0,0 +1,69 @@ +import { NextRequest, NextResponse } from 'next/server'; +import { getAuthInfoFromCookie } from '../../../../lib/auth'; +import { WebSocketMessage } from '../../../../lib/types'; + +// 从全局对象获取WebSocket实例相关方法 +function sendMessageToUsers(userIds: string[], message: WebSocketMessage): boolean { + try { + if ((global as any).wss) { + // 假设websocket.js中导出了sendMessageToUsers方法并附加到了wss对象上 + return require('../../../../../websocket').sendMessageToUsers(userIds, message); + } + return false; + } catch (error) { + console.error('发送WebSocket消息失败:', error); + return false; + } +} + +// 发送消息的备用 API 路由，在 WebSocket 不可用时使用 +export async function POST(request: NextRequest) { + try { + const authInfo = getAuthInfoFromCookie(request); + if (!authInfo || !authInfo.username) { + return NextResponse.json({ error: '未授权' }, { status: 401 }); + } + + const message: WebSocketMessage = await request.json(); + + // 根据消息类型处理 + let targetUsers: string[] = []; + + switch (message.type) { + case 'message': + const { participants } = message.data; + if (participants && Array.isArray(participants)) { + targetUsers = participants; + } + break; + + case 'friend_request': + const { to_user } = message.data; + if (to_user) { + targetUsers = [to_user]; + } + break; + + case 'friend_accepted': + const { from_user } = message.data; + if (from_user) { + targetUsers = [from_user]; + } + break; + + default: + return NextResponse.json({ error: '不支持的消息类型' }, { status: 400 }); + } + + // 通过 WebSocket 发送消息 + const sent = sendMessageToUsers(targetUsers, message); + + return NextResponse.json({ + success: true, + delivered: sent + }); + } catch (error) { + console.error('通过 API 发送消息失败:', error); + return NextResponse.json({ error: '发送消息失败' }, { status: 500 }); + } +} diff --git a/src/app/api/health/route.ts b/src/app/api/health/route.ts new file mode 100644 index 0000000..68edb1d --- /dev/null +++ b/src/app/api/health/route.ts @@ -0,0 +1,15 @@ +import { NextResponse } from 'next/server'; + +export async function GET() { + return NextResponse.json({ + status: 'ok', + timestamp: new Date().toISOString(), + message: 'Next.js server is running' + }); +} + + + + + + diff --git a/src/app/api/shortdrama/parse/all/route.ts b/src/app/api/shortdrama/parse/all/route.ts index 587c490..eae1946 100644 --- a/src/app/api/shortdrama/parse/all/route.ts +++ b/src/app/api/shortdrama/parse/all/route.ts @@ -7,17 +7,37 @@ export async function GET(request: NextRequest) { const id = searchParams.get('id'); if (!id) { + console.error('🚫 [短剧API] 缺少必需的ID参数'); return NextResponse.json( { error: 'id parameter is required' }, { status: 400 } ); } + console.log(`🎬 [短剧API] 开始请求短剧全集地址:`, { + requestId: id, + timestamp: new Date().toISOString(), + userAgent: request.headers.get('user-agent'), + referer: request.headers.get('referer') + }); + const apiUrl = new URL(`${API_CONFIG.shortdrama.baseUrl}/vod/parse/all`); apiUrl.searchParams.append('id', id); + apiUrl.searchParams.append('proxy', 'true'); + console.log(`🌐 [短剧API] 外部API调用详情:`, { + baseUrl: API_CONFIG.shortdrama.baseUrl, + fullUrl: apiUrl.toString(), + headers: API_CONFIG.shortdrama.headers, + timeout: '60秒' + }); + + const requestStartTime = performance.now(); const controller = new AbortController(); - const timeoutId = setTimeout(() => controller.abort(), 60000); // 60秒超时，为获取全集地址提供充足时间 + const timeoutId = setTimeout(() => { + console.error('⏰ [短剧API] 请求超时 - 60秒'); + controller.abort(); + }, 60000); const response = await fetch(apiUrl.toString(), { method: 'GET', @@ -26,42 +46,249 @@ export async function GET(request: NextRequest) { }); clearTimeout(timeoutId); + const requestEndTime = performance.now(); + const requestDuration = requestEndTime - requestStartTime; + + console.log(`📡 [短剧API] 外部API响应状态:`, { + status: response.status, + statusText: response.statusText, + ok: response.ok, + headers: Object.fromEntries(response.headers.entries()), + requestDuration: `${requestDuration.toFixed(2)}ms`, + contentType: response.headers.get('content-type') + }); if (!response.ok) { - throw new Error(`API request failed: ${response.status}`); + console.error(`❌ [短剧API] 外部API请求失败:`, { + status: response.status, + statusText: response.statusText, + url: apiUrl.toString(), + requestDuration: `${requestDuration.toFixed(2)}ms` + }); + throw new Error(`API request failed: ${response.status} - ${response.statusText}`); } const data = await response.json(); + console.log(`📦 [短剧API] 外部API响应数据分析:`, { + hasData: !!data, + dataKeys: data ? Object.keys(data) : [], + videoId: data?.videoId, + videoName: data?.videoName, + totalEpisodes: data?.totalEpisodes, + successfulCount: data?.successfulCount, + failedCount: data?.failedCount, + hasResults: !!data?.results, + resultsLength: data?.results?.length || 0, + resultsType: typeof data?.results, + isResultsArray: Array.isArray(data?.results), + hasCover: !!data?.cover, + hasDescription: !!data?.description + }); - // 直接返回API响应数据，播放页面会处理数据结构转换 - return NextResponse.json(data); + // 分析results数组的详细结构 + if (data?.results && Array.isArray(data.results)) { + const successCount = data.results.filter((item: any) => item.status === 'success').length; + const failureCount = data.results.filter((item: any) => item.status !== 'success').length; + const withUrlCount = data.results.filter((item: any) => item.status === 'success' && item.parsedUrl).length; + + console.log(`📋 [短剧API] Results数组详细分析:`, { + totalItems: data.results.length, + successItems: successCount, + failureItems: failureCount, + itemsWithUrl: withUrlCount, + sampleSuccessItems: data.results.filter((item: any) => item.status === 'success').slice(0, 3).map((item: any) => ({ + index: item.index, + label: item.label, + status: item.status, + hasUrl: !!item.parsedUrl, + urlLength: item.parsedUrl ? item.parsedUrl.length : 0, + urlDomain: item.parsedUrl ? item.parsedUrl.match(/https?:\/\/([^\/]+)/)?.[1] : null + })), + sampleFailureItems: data.results.filter((item: any) => item.status !== 'success').slice(0, 3).map((item: any) => ({ + index: item.index, + label: item.label, + status: item.status, + reason: item.reason + })) + }); + } else { + console.error(`❌ [短剧API] Results数组无效:`, { + hasResults: !!data?.results, + resultsType: typeof data?.results, + isArray: Array.isArray(data?.results), + resultsValue: data?.results + }); + } + + // 验证返回的数据格式 + if (!data || !data.results || !Array.isArray(data.results)) { + console.error('❌ [短剧API] 数据格式验证失败:', { + hasData: !!data, + hasResults: !!data?.results, + resultsType: typeof data?.results, + isResultsArray: Array.isArray(data?.results), + fullData: data + }); + throw new Error('Invalid API response format - 外部API返回的数据格式不正确'); + } + + // 检查播放地址的有效性 + console.log('🔍 [短剧API] 开始验证播放地址有效性...'); + + const validResults = data.results.filter((item: any) => { + const isValid = item.status === 'success' && + item.parsedUrl && + typeof item.parsedUrl === 'string' && + item.parsedUrl.trim().length > 0; + + if (!isValid) { + console.warn(`⚠️ [短剧API] 无效的播放源:`, { + index: item.index, + label: item.label, + status: item.status, + hasUrl: !!item.parsedUrl, + urlType: typeof item.parsedUrl, + urlLength: item.parsedUrl ? item.parsedUrl.length : 0, + reason: item.reason || '未知原因' + }); + } + + return isValid; + }); + + console.log(`✅ [短剧API] 播放源验证完成:`, { + totalSources: data.results.length, + validSources: validResults.length, + invalidSources: data.results.length - validResults.length, + validationRate: `${((validResults.length / data.results.length) * 100).toFixed(1)}%` + }); + + if (validResults.length === 0) { + console.error('❌ [短剧API] 没有找到任何有效的播放地址:', { + totalResults: data.results.length, + allResults: data.results.map((item: any) => ({ + index: item.index, + label: item.label, + status: item.status, + hasUrl: !!item.parsedUrl, + urlType: typeof item.parsedUrl, + reason: item.reason + })) + }); + throw new Error('No valid video sources found - 所有播放源都无效'); + } + + // 返回处理后的数据 + const processedData = { + ...data, + results: validResults, + totalEpisodes: validResults.length, + successfulCount: validResults.length, + originalTotalEpisodes: data.totalEpisodes, + originalSuccessfulCount: data.successfulCount, + filteredCount: data.results.length - validResults.length + }; + + console.log('🎯 [短剧API] 返回处理后的短剧数据:', { + videoId: processedData.videoId, + videoName: processedData.videoName, + originalTotal: processedData.originalTotalEpisodes, + filteredTotal: processedData.totalEpisodes, + originalSuccess: processedData.originalSuccessfulCount, + filteredSuccess: processedData.successfulCount, + filteredOut: processedData.filteredCount, + firstEpisode: { + index: processedData.results[0]?.index, + label: processedData.results[0]?.label, + urlPreview: processedData.results[0]?.parsedUrl?.substring(0, 100) + '...' + }, + lastEpisode: { + index: processedData.results[processedData.results.length - 1]?.index, + label: processedData.results[processedData.results.length - 1]?.label, + urlPreview: processedData.results[processedData.results.length - 1]?.parsedUrl?.substring(0, 100) + '...' + } + }); + + return NextResponse.json(processedData); } catch (error) { - console.error('Short drama all parse API error:', error); - - // 返回模拟的短剧数据作为备用 const { searchParams: errorSearchParams } = new URL(request.url); const errorId = errorSearchParams.get('id'); + + console.error('💥 [短剧API] 发生错误:', { + errorType: error instanceof Error ? error.constructor.name : typeof error, + errorMessage: error instanceof Error ? error.message : String(error), + errorStack: error instanceof Error ? error.stack : undefined, + requestId: errorId, + timestamp: new Date().toISOString(), + isTimeoutError: error instanceof Error && error.name === 'AbortError', + isFetchError: error instanceof TypeError, + isNetworkError: error instanceof Error && error.message.includes('fetch') + }); + + // 分析错误类型 + let errorCategory = '未知错误'; + if (error instanceof Error) { + if (error.name === 'AbortError') { + errorCategory = '请求超时'; + } else if (error.message.includes('fetch')) { + errorCategory = '网络连接错误'; + } else if (error.message.includes('API request failed')) { + errorCategory = '外部API错误'; + } else if (error.message.includes('Invalid API response format')) { + errorCategory = '数据格式错误'; + } else if (error.message.includes('No valid video sources found')) { + errorCategory = '无有效播放源'; + } + } + + console.warn(`🔄 [短剧API] 错误类型: ${errorCategory}，启用备用数据`); + const mockData = { videoId: parseInt(errorId || '1') || 1, - videoName: '短剧播放示例', - results: Array.from({ length: 10 }, (_, index) => ({ + videoName: `短剧播放示例 (ID: ${errorId})`, + results: Array.from({ length: 8 }, (_, index) => ({ index: index, label: `第${index + 1}集`, - parsedUrl: `https://example.com/video${index + 1}.mp4`, + // 使用一些测试视频地址，这些是公共测试资源 + parsedUrl: `https://sample-videos.com/zip/10/mp4/SampleVideo_720x480_1mb.mp4?episode=${index + 1}`, parseInfo: { - headers: {}, + headers: { + 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36', + 'Referer': 'https://sample-videos.com' + }, type: 'mp4' }, status: 'success', reason: null })), - totalEpisodes: 10, - successfulCount: 10, + totalEpisodes: 8, + successfulCount: 8, failedCount: 0, - cover: 'https://via.placeholder.com/300x400', - description: '这是一个示例短剧，用于测试播放功能。' + cover: 'https://via.placeholder.com/300x400?text=短剧示例', + description: `这是一个短剧播放示例，用于测试播放功能。原始ID: ${errorId}，错误: ${errorCategory}`, + // 添加错误信息供调试使用 + _debugInfo: { + errorCategory: errorCategory, + originalError: error instanceof Error ? error.message : String(error), + fallbackDataUsed: true, + timestamp: new Date().toISOString() + } }; - return NextResponse.json(mockData); + console.log('🔧 [短剧API] 返回备用短剧数据:', { + videoName: mockData.videoName, + totalEpisodes: mockData.totalEpisodes, + errorCategory: errorCategory, + firstEpisodeUrl: mockData.results[0].parsedUrl, + hasFallbackData: true + }); + + return NextResponse.json(mockData, { + headers: { + 'X-Fallback-Data': 'true', + 'X-Error-Category': errorCategory, + 'X-Original-Error': error instanceof Error ? error.message : String(error) + } + }); } } diff --git a/src/app/api/shortdrama/parse/batch/route.ts b/src/app/api/shortdrama/parse/batch/route.ts index cdd316f..ab07f37 100644 --- a/src/app/api/shortdrama/parse/batch/route.ts +++ b/src/app/api/shortdrama/parse/batch/route.ts @@ -17,6 +17,7 @@ export async function GET(request: NextRequest) { const apiUrl = new URL(`${API_CONFIG.shortdrama.baseUrl}/vod/parse/batch`); apiUrl.searchParams.append('id', id); if (episodes) apiUrl.searchParams.append('episodes', episodes); + apiUrl.searchParams.append('proxy', 'true'); const response = await fetch(apiUrl.toString(), { method: 'GET', diff --git a/src/app/api/shortdrama/parse/single/route.ts b/src/app/api/shortdrama/parse/single/route.ts index 4b0612a..c748ec3 100644 --- a/src/app/api/shortdrama/parse/single/route.ts +++ b/src/app/api/shortdrama/parse/single/route.ts @@ -17,6 +17,7 @@ export async function GET(request: NextRequest) { const apiUrl = new URL(`${API_CONFIG.shortdrama.baseUrl}/vod/parse/single`); apiUrl.searchParams.append('id', id); if (episode) apiUrl.searchParams.append('episode', episode); + apiUrl.searchParams.append('proxy', 'true'); const response = await fetch(apiUrl.toString(), { method: 'GET', diff --git a/src/app/api/websocket/route.ts b/src/app/api/websocket/route.ts new file mode 100644 index 0000000..95fe46f --- /dev/null +++ b/src/app/api/websocket/route.ts @@ -0,0 +1,30 @@ +import { NextRequest } from 'next/server'; + +// 这个端点主要用于 WebSocket 升级，实际的 WebSocket 处理在自定义服务器中进行 +export async function GET(request: NextRequest) { + // 如果运行在自定义服务器环境下，WebSocket 连接应该已经被处理 + // 这里主要是为了提供一个回退响应 + + const { searchParams } = new URL(request.url); + if (searchParams.get('upgrade') === 'websocket') { + return new Response('WebSocket upgrade should be handled by custom server', { + status: 426, + headers: { + 'Upgrade': 'websocket', + 'Connection': 'Upgrade', + }, + }); + } + + return new Response('WebSocket endpoint', { + status: 200, + headers: { 'Content-Type': 'text/plain' }, + }); +} + + + + + + + diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index 172a430..15d96ca 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -262,17 +262,22 @@ function LoginPageClient() { {/* 绑定选项 */} {!requireMachineCode && ( -
- setBindMachineCode(e.target.checked)} - className='w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600' - /> - +
+
+ setBindMachineCode(e.target.checked)} + className='w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600' + /> + +
+ {/*

+ // 管理员可选择不绑定机器码直接登录 +

*/}
)}
diff --git a/src/app/play/page.tsx b/src/app/play/page.tsx index bf74d21..9d98031 100644 --- a/src/app/play/page.tsx +++ b/src/app/play/page.tsx @@ -2,10 +2,8 @@ 'use client'; -import Artplayer from 'artplayer'; -import artplayerPluginDanmuku from 'artplayer-plugin-danmuku'; -import Hls from 'hls.js'; -import { Heart, PlayCircleIcon } from 'lucide-react'; +// Artplayer 和 Hls 以及弹幕插件将动态加载 +import { Heart } from 'lucide-react'; import { useRouter, useSearchParams } from 'next/navigation'; import { Suspense, useEffect, useRef, useState } from 'react'; @@ -24,7 +22,6 @@ import { } from '@/lib/db.client'; import { SearchResult } from '@/lib/types'; import { getVideoResolutionFromM3u8, processImageUrl } from '@/lib/utils'; -import { getShortDramaRecommend, ShortDramaRecommendResponse } from '@/lib/shortdrama.client'; import EpisodeSelector from '@/components/EpisodeSelector'; import PageLayout from '@/components/PageLayout'; @@ -62,10 +59,6 @@ function PlayPageClient() { // 收藏状态 const [favorited, setFavorited] = useState(false); - // 推荐短剧状态 - const [recommendedShortDramas, setRecommendedShortDramas] = useState(null); - const [recommendLoading, setRecommendLoading] = useState(false); - // 跳过片头片尾配置 const [skipConfig, setSkipConfig] = useState<{ enable: boolean; @@ -113,12 +106,16 @@ function PlayPageClient() { ); const [currentId, setCurrentId] = useState(searchParams.get('id') || ''); - // 短剧ID（用于调用短剧全集地址API） - const [shortdramaId,] = useState(searchParams.get('shortdrama_id') || ''); - - // 短剧分类和标签信息（从URL参数获取） - const [vodClass] = useState(searchParams.get('vod_class') || ''); - const [vodTag] = useState(searchParams.get('vod_tag') || ''); + // 短剧相关参数 + const [shortdramaId, setShortdramaId] = useState( + searchParams.get('shortdrama_id') || '' + ); + const [vodClass, setVodClass] = useState( + searchParams.get('vod_class') || '' + ); + const [vodTag, setVodTag] = useState( + searchParams.get('vod_tag') || '' + ); // 搜索所需信息 const [searchTitle] = useState(searchParams.get('stitle') || ''); @@ -128,10 +125,60 @@ function PlayPageClient() { const [needPrefer, setNeedPrefer] = useState( searchParams.get('prefer') === 'true' ); + + // 动态加载的依赖 + const [dynamicDeps, setDynamicDeps] = useState<{ + Artplayer: any; + Hls: any; + artplayerPluginDanmuku: any; + } | null>(null); + + // 弹幕相关状态 + const [danmuEnabled, setDanmuEnabled] = useState(() => { + if (typeof window !== 'undefined') { + const saved = localStorage.getItem('enableDanmu'); + if (saved !== null) return saved === 'true'; + } + return true; + }); const needPreferRef = useRef(needPrefer); useEffect(() => { needPreferRef.current = needPrefer; }, [needPrefer]); + + // 动态加载 Artplayer、Hls 和弹幕插件 + useEffect(() => { + let mounted = true; + + const loadDynamicDeps = async () => { + try { + const [ArtplayerModule, HlsModule, DanmakuModule] = await Promise.all([ + import('artplayer'), + import('hls.js'), + import('artplayer-plugin-danmuku') + ]); + + if (mounted) { + setDynamicDeps({ + Artplayer: ArtplayerModule.default, + Hls: HlsModule.default, + artplayerPluginDanmuku: DanmakuModule.default + }); + } + } catch (error) { + console.error('加载播放器依赖失败:', error); + if (mounted) { + setError('播放器加载失败'); + } + } + }; + + loadDynamicDeps(); + + return () => { + mounted = false; + }; + }, []); // 集数相关 const [currentEpisodeIndex, setCurrentEpisodeIndex] = useState(0); @@ -141,6 +188,9 @@ function PlayPageClient() { const videoYearRef = useRef(videoYear); const detailRef = useRef(detail); const currentEpisodeIndexRef = useRef(currentEpisodeIndex); + const shortdramaIdRef = useRef(shortdramaId); + const vodClassRef = useRef(vodClass); + const vodTagRef = useRef(vodTag); // 同步最新值到 refs useEffect(() => { @@ -150,6 +200,9 @@ function PlayPageClient() { currentEpisodeIndexRef.current = currentEpisodeIndex; videoTitleRef.current = videoTitle; videoYearRef.current = videoYear; + shortdramaIdRef.current = shortdramaId; + vodClassRef.current = vodClass; + vodTagRef.current = vodTag; }, [ currentSource, currentId, @@ -157,6 +210,9 @@ function PlayPageClient() { currentEpisodeIndex, videoTitle, videoYear, + shortdramaId, + vodClass, + vodTag, ]); // 视频播放地址 @@ -215,7 +271,6 @@ function PlayPageClient() { const artPlayerRef = useRef(null); const artRef = useRef(null); - const isComponentMountedRef = useRef(true); // 组件挂载状态 // Wake Lock 相关 const wakeLockRef = useRef(null); @@ -224,22 +279,6 @@ function PlayPageClient() { // 工具函数（Utils） // ----------------------------------------------------------------------------- - // 获取推荐短剧 - const fetchRecommendedShortDramas = async (forceShortdrama?: boolean) => { - // 只在短剧播放页面显示推荐，或者强制调用时执行 - if (!forceShortdrama && currentSource !== 'shortdrama') return; - - try { - setRecommendLoading(true); - const recommendData = await getShortDramaRecommend({ size: '5' }); - setRecommendedShortDramas(recommendData); - } catch (error) { - console.error('获取推荐短剧失败:', error); - } finally { - setRecommendLoading(false); - } - }; - // 播放源优选函数 const preferBestSource = async ( sources: SearchResult[] @@ -450,33 +489,24 @@ function PlayPageClient() { setVideoUrl(''); return; } - const newUrl = detailData?.episodes[episodeIndex] || ''; + + let newUrl = detailData?.episodes[episodeIndex] || ''; + + // 如果是短剧且URL还没有经过代理处理，再次处理 + if (detailData.source === 'shortdrama' && newUrl && !newUrl.includes('/api/proxy/video')) { + newUrl = processShortDramaUrl(newUrl); + console.log('更新短剧播放地址:', { + episode: episodeIndex + 1, + originalUrl: detailData.episodes[episodeIndex], + processedUrl: newUrl + }); + } + if (newUrl !== videoUrl) { setVideoUrl(newUrl); } }; - // 检查是否需要代理访问的通用函数 - const needsProxyUrl = (url: string): boolean => { - return url.includes('quark.cn') || - url.includes('drive.quark.cn') || - url.includes('dl-c-zb-') || - url.includes('dl-c-') || - url.match(/https?:\/\/[^/]*\.drive\./) !== null; - }; - - // 获取代理URL的通用函数 - const getProxyUrl = (url: string): string => { - const needsProxy = needsProxyUrl(url); - if (needsProxy) { - console.log('Using proxy for URL:', url); - const proxyUrl = `/api/proxy/video?url=${encodeURIComponent(url)}`; - console.log('Proxy URL:', proxyUrl); - return proxyUrl; - } - return url; - }; - const ensureVideoSource = (video: HTMLVideoElement | null, url: string) => { if (!video || !url) return; const sources = Array.from(video.getElementsByTagName('source')); @@ -527,44 +557,14 @@ function PlayPageClient() { const cleanupPlayer = () => { if (artPlayerRef.current) { try { - const player = artPlayerRef.current; - - // 先设置为null防止在清理过程中被访问 - artPlayerRef.current = null; - - // 移除所有事件监听器 - try { - if (typeof player.off === 'function') { - // 移除常见的事件监听器 - const events = [ - 'ready', 'play', 'pause', 'video:ended', 'video:volumechange', - 'video:ratechange', 'video:canplay', 'video:timeupdate', 'error' - ]; - events.forEach(event => { - try { - player.off(event); - } catch (eventErr) { - console.warn(`移除事件监听器 ${event} 失败:`, eventErr); - } - }); - } - } catch (offErr) { - console.warn('移除事件监听器时出错:', offErr); - } - // 销毁 HLS 实例 - if (player.video && player.video.hls) { - try { - player.video.hls.destroy(); - } catch (hlsErr) { - console.warn('清理HLS实例时出错:', hlsErr); - } + if (artPlayerRef.current.video && artPlayerRef.current.video.hls) { + artPlayerRef.current.video.hls.destroy(); } // 销毁 ArtPlayer 实例 - if (typeof player.destroy === 'function') { - player.destroy(); - } + artPlayerRef.current.destroy(); + artPlayerRef.current = null; console.log('播放器资源已清理'); } catch (err) { @@ -572,12 +572,6 @@ function PlayPageClient() { artPlayerRef.current = null; } } - - // 重置所有相关状态 - resumeTimeRef.current = null; - lastVolumeRef.current = 0.7; - lastPlaybackRateRef.current = 1.0; - lastSaveTimeRef.current = 0; }; // 去广告相关函数 @@ -634,7 +628,6 @@ function PlayPageClient() { ? '设置片头时间' : `${formatTime(skipConfigRef.current.intro_time)}`, onClick: function () { - if (!isComponentMountedRef.current || !artPlayerRef.current) return; const currentTime = artPlayerRef.current?.currentTime || 0; if (currentTime > 0) { const newConfig = { @@ -655,7 +648,6 @@ function PlayPageClient() { ? '设置片尾时间' : `-${formatTime(-skipConfigRef.current.outro_time)}`, onClick: function () { - if (!isComponentMountedRef.current || !artPlayerRef.current) return; const outroTime = -( artPlayerRef.current?.duration - @@ -704,34 +696,421 @@ function PlayPageClient() { } }; - class CustomHlsJsLoader extends Hls.DefaultConfig.loader { - constructor(config: any) { - super(config); - const load = this.load.bind(this); - this.load = function (context: any, config: any, callbacks: any) { - // 拦截manifest和level请求 - if ( - (context as any).type === 'manifest' || - (context as any).type === 'level' - ) { - const onSuccess = callbacks.onSuccess; - callbacks.onSuccess = function ( - response: any, - stats: any, - context: any - ) { - // 如果是m3u8文件，处理内容以移除广告分段 - if (response.data && typeof response.data === 'string') { - // 过滤掉广告段 - 实现更精确的广告过滤逻辑 - response.data = filterAdsFromM3U8(response.data); - } - return onSuccess(response, stats, context, null); - }; - } - // 执行原始load方法 - load(context, config, callbacks); - }; + // 弹幕相关函数 + const generateVideoId = (source: string, id: string, episode: number): string => { + return `${source}_${id}_${episode}`; + }; + + // 短剧标签处理函数 + const parseVodTags = (vodTagString: string): string[] => { + if (!vodTagString) return []; + return vodTagString.split(',').map(tag => tag.trim()).filter(tag => tag.length > 0); + }; + + // 为标签生成颜色的函数 + const getTagColor = (tag: string, isClass: boolean = false) => { + if (isClass) { + // vod_class 使用更显眼的颜色 + const classColors = [ + 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200', + 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200', + 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200', + 'bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-200', + 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-200' + ]; + const hash = tag.split('').reduce((a, b) => a + b.charCodeAt(0), 0); + return classColors[hash % classColors.length]; + } else { + // vod_tag 使用较为柔和的颜色 + const tagColors = [ + 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300', + 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300', + 'bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300', + 'bg-stone-100 text-stone-700 dark:bg-stone-800 dark:text-stone-300', + 'bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300', + 'bg-amber-100 text-amber-700 dark:bg-amber-800 dark:text-amber-300', + 'bg-orange-100 text-orange-700 dark:bg-orange-800 dark:text-orange-300', + 'bg-red-100 text-red-700 dark:bg-red-800 dark:text-red-300', + 'bg-pink-100 text-pink-700 dark:bg-pink-800 dark:text-pink-300', + 'bg-rose-100 text-rose-700 dark:bg-rose-800 dark:text-rose-300' + ]; + const hash = tag.split('').reduce((a, b) => a + b.charCodeAt(0), 0); + return tagColors[hash % tagColors.length]; } + }; + + // 短剧播放地址处理函数 - 参考utils.ts中的代理逻辑 + const processShortDramaUrl = (originalUrl: string): string => { + if (!originalUrl) { + console.warn('🚫 [URL处理] 原始URL为空'); + return originalUrl; + } + + console.log('🔗 [URL处理] 开始处理短剧播放地址:', { + originalUrl: originalUrl.substring(0, 120) + (originalUrl.length > 120 ? '...' : ''), + urlLength: originalUrl.length, + protocol: originalUrl.split('://')[0] || 'unknown', + domain: originalUrl.match(/https?:\/\/([^\/]+)/)?.[1] || 'unknown' + }); + + // 检查是否需要使用代理 - 参考utils.ts中的逻辑 + const proxyChecks = { + 'quark.cn': originalUrl.includes('quark.cn'), + 'drive.quark.cn': originalUrl.includes('drive.quark.cn'), + 'dl-c-zb-': originalUrl.includes('dl-c-zb-'), + 'dl-c-': originalUrl.includes('dl-c-'), + 'drive pattern': !!originalUrl.match(/https?:\/\/[^/]*\.drive\./), + 'ffzy-online': originalUrl.includes('ffzy-online'), + 'bfikuncdn.com': originalUrl.includes('bfikuncdn.com'), + 'vip.': originalUrl.includes('vip.'), + 'm3u8': originalUrl.includes('m3u8'), + 'not localhost': !originalUrl.includes('localhost') && !originalUrl.includes('127.0.0.1') + }; + + const needsProxy = Object.values(proxyChecks).some(check => check); + const triggeredChecks = Object.entries(proxyChecks).filter(([, check]) => check).map(([name]) => name); + + console.log('🔍 [URL处理] 代理检查结果:', { + needsProxy, + triggeredChecks, + proxyChecks + }); + + if (needsProxy) { + const proxyUrl = `/api/proxy/video?url=${encodeURIComponent(originalUrl)}`; + console.log('🎯 [URL处理] 短剧播放地址需要代理:', { + originalUrl: originalUrl.substring(0, 100) + '...', + proxyUrl: proxyUrl.substring(0, 100) + '...', + triggeredChecks, + encodedLength: encodeURIComponent(originalUrl).length + }); + return proxyUrl; + } + + console.log('✅ [URL处理] 短剧播放地址直接使用:', { + url: originalUrl.substring(0, 100) + (originalUrl.length > 100 ? '...' : ''), + reason: '不满足代理条件' + }); + return originalUrl; + }; + + // 短剧数据获取和转换函数 + const fetchShortDramaData = async (shortdramaId: string): Promise => { + try { + console.log('🎬 [短剧API] 开始获取短剧数据'); + console.log('🔍 [短剧API] 请求参数:', { + shortdramaId: shortdramaId, + requestUrl: `/api/shortdrama/parse/all?id=${encodeURIComponent(shortdramaId)}`, + timestamp: new Date().toISOString() + }); + + const requestStartTime = performance.now(); + + const response = await fetch(`/api/shortdrama/parse/all?id=${encodeURIComponent(shortdramaId)}`, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + }, + }); + + const requestEndTime = performance.now(); + const requestDuration = requestEndTime - requestStartTime; + + console.log('📡 [短剧API] 响应状态:', { + status: response.status, + statusText: response.statusText, + ok: response.ok, + headers: Object.fromEntries(response.headers.entries()), + requestDuration: `${requestDuration.toFixed(2)}ms` + }); + + if (!response.ok) { + const errorText = await response.text(); + console.error('❌ [短剧API] 响应错误:', { + status: response.status, + statusText: response.statusText, + errorText: errorText, + url: `/api/shortdrama/parse/all?id=${encodeURIComponent(shortdramaId)}` + }); + throw new Error(`获取短剧数据失败: ${response.status} - ${response.statusText}`); + } + + const data = await response.json(); + console.log('📦 [短剧API] 响应数据结构:', { + hasData: !!data, + dataKeys: data ? Object.keys(data) : [], + videoId: data?.videoId, + videoName: data?.videoName, + hasResults: !!data?.results, + resultsLength: data?.results?.length || 0, + totalEpisodes: data?.totalEpisodes, + successfulCount: data?.successfulCount, + failedCount: data?.failedCount, + hasCover: !!data?.cover, + hasDescription: !!data?.description + }); + + // 详细打印 results 数组的结构 + if (data?.results && Array.isArray(data.results)) { + console.log('📋 [短剧API] Results数组详情:', { + totalCount: data.results.length, + sample: data.results.slice(0, 3).map((item: any) => ({ + index: item.index, + label: item.label, + status: item.status, + hasParsedUrl: !!item.parsedUrl, + parsedUrlType: typeof item.parsedUrl, + parsedUrlLength: item.parsedUrl ? item.parsedUrl.length : 0, + parseInfo: item.parseInfo ? Object.keys(item.parseInfo) : null, + reason: item.reason + })) + }); + } else { + console.error('❌ [短剧API] Results数组无效:', { + results: data?.results, + resultsType: typeof data?.results, + isArray: Array.isArray(data?.results) + }); + } + + // 检查数据有效性 + if (!data) { + console.error('❌ [短剧API] 数据为空'); + throw new Error('短剧数据为空'); + } + + console.log('🔄 [短剧处理] 开始转换数据为SearchResult格式'); + + // 将短剧数据转换为SearchResult格式 + const episodes: string[] = []; + const episodesTitles: string[] = []; + const processingLog: any[] = []; + + if (data.results && Array.isArray(data.results)) { + console.log('📝 [短剧处理] 处理播放源数据:', { + totalCount: data.results.length, + validCount: data.results.filter((item: any) => item.status === 'success').length, + failedCount: data.results.filter((item: any) => item.status !== 'success').length + }); + + // 按index排序确保集数顺序正确 + const sortedResults = data.results.sort((a: any, b: any) => { + const indexA = parseInt(a.index) || 0; + const indexB = parseInt(b.index) || 0; + return indexA - indexB; + }); + + console.log('🔢 [短剧处理] 排序后的集数范围:', { + minIndex: sortedResults[0]?.index, + maxIndex: sortedResults[sortedResults.length - 1]?.index, + firstLabel: sortedResults[0]?.label, + lastLabel: sortedResults[sortedResults.length - 1]?.label + }); + + sortedResults.forEach((item: any, arrayIndex: number) => { + const itemLog: any = { + arrayIndex, + index: item.index, + label: item.label, + status: item.status, + hasUrl: !!item.parsedUrl, + urlLength: item.parsedUrl ? item.parsedUrl.length : 0, + reason: item.reason + }; + + if (item.status === 'success' && item.parsedUrl) { + console.log(`✅ [短剧处理] 处理第 ${arrayIndex + 1} 个数据项:`, { + index: item.index, + label: item.label, + originalUrl: item.parsedUrl.substring(0, 100) + (item.parsedUrl.length > 100 ? '...' : ''), + urlDomain: item.parsedUrl.match(/https?:\/\/([^\/]+)/)?.[1] || 'unknown' + }); + + // 处理播放地址，添加代理支持 + const processedUrl = processShortDramaUrl(item.parsedUrl); + episodes.push(processedUrl); + + // 使用API提供的label，如果没有则根据索引生成 + const episodeTitle = item.label || `第${(item.index !== undefined ? item.index + 1 : arrayIndex + 1)}集`; + episodesTitles.push(episodeTitle); + + console.log(`📺 [短剧处理] 成功添加集数 ${episodes.length}:`, { + title: episodeTitle, + originalUrl: item.parsedUrl.substring(0, 80) + '...', + processedUrl: processedUrl.substring(0, 80) + '...', + needsProxy: processedUrl.includes('/api/proxy/video') + }); + + itemLog.processed = true; + itemLog.needsProxy = processedUrl.includes('/api/proxy/video'); + } else { + console.warn(`⚠️ [短剧处理] 跳过无效的播放源:`, { + index: item.index, + label: item.label, + status: item.status, + hasUrl: !!item.parsedUrl, + reason: item.reason, + fullItem: item + }); + itemLog.processed = false; + itemLog.skipReason = `状态: ${item.status}, 有URL: ${!!item.parsedUrl}`; + } + + processingLog.push(itemLog); + }); + + console.log('📊 [短剧处理] 数据处理统计:', { + totalProcessed: processingLog.length, + successfulEpisodes: episodes.length, + failedItems: processingLog.filter((item: any) => !item.processed).length, + processingDetails: processingLog + }); + } else { + console.error('❌ [短剧处理] Results数组无效或为空:', { + hasResults: !!data.results, + resultsType: typeof data.results, + isArray: Array.isArray(data.results), + rawResults: data.results + }); + } + + if (episodes.length === 0) { + console.error('❌ [短剧处理] 没有找到有效的播放地址:', { + originalDataResults: data.results?.length || 0, + validResults: data.results?.filter((item: any) => item.status === 'success')?.length || 0, + withUrls: data.results?.filter((item: any) => item.status === 'success' && item.parsedUrl)?.length || 0, + processingLog + }); + throw new Error('未找到可播放的视频源，请稍后重试'); + } + + console.log('🎯 [短剧处理] 构建SearchResult对象'); + + const searchResult: SearchResult = { + source: 'shortdrama', + id: shortdramaId, + title: data.videoName || videoTitle || '短剧播放', + poster: data.cover || '', + year: videoYear || new Date().getFullYear().toString(), + source_name: '短剧', + type_name: '短剧', + class: '短剧', + episodes: episodes, + episodes_titles: episodesTitles, + desc: data.description || '精彩短剧，为您呈现优质内容', + douban_id: 0 + }; + + console.log('✅ [短剧处理] 转换完成的短剧数据:', { + source: searchResult.source, + id: searchResult.id, + title: searchResult.title, + totalEpisodes: searchResult.episodes.length, + episodesTitles: searchResult.episodes_titles, + firstEpisodeUrl: searchResult.episodes[0]?.substring(0, 100) + '...', + lastEpisodeUrl: searchResult.episodes[searchResult.episodes.length - 1]?.substring(0, 100) + '...', + poster: searchResult.poster, + year: searchResult.year, + desc: searchResult.desc?.substring(0, 100) + '...' + }); + + console.log('🔗 [短剧处理] 播放地址列表预览:'); + episodes.slice(0, 5).forEach((url, index) => { + console.log(` ${index + 1}. ${episodesTitles[index]} - ${url.substring(0, 120)}${url.length > 120 ? '...' : ''}`); + }); + if (episodes.length > 5) { + console.log(` ... 还有 ${episodes.length - 5} 个播放地址`); + } + + return searchResult; + } catch (error) { + console.error('❌ [短剧处理] 获取短剧数据失败:', { + error: error, + errorMessage: error instanceof Error ? error.message : String(error), + errorStack: error instanceof Error ? error.stack : undefined, + shortdramaId: shortdramaId, + timestamp: new Date().toISOString() + }); + + // 提供更详细的错误信息 + if (error instanceof TypeError && error.message.includes('fetch')) { + throw new Error('网络连接失败，请检查网络设置后重试'); + } else if (error instanceof Error) { + throw error; + } else { + throw new Error('短剧数据加载失败，请稍后重试'); + } + } + }; + + const loadDanmuData = async (videoId: string) => { + try { + const response = await fetch(`/api/danmu?videoId=${encodeURIComponent(videoId)}`); + if (!response.ok) { + throw new Error('获取弹幕数据失败'); + } + return await response.json(); + } catch (error) { + console.error('加载弹幕失败:', error); + return []; + } + }; + + const sendDanmu = async (videoId: string, danmuData: any) => { + try { + const response = await fetch('/api/danmu', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + videoId, + ...danmuData + }), + }); + + if (!response.ok) { + const errorData = await response.json(); + throw new Error(errorData.error || '发送弹幕失败'); + } + + return await response.json(); + } catch (error) { + console.error('发送弹幕失败:', error); + throw error; + } + }; + + const createCustomHlsJsLoader = (Hls: any) => { + return class extends Hls.DefaultConfig.loader { + constructor(config: any) { + super(config); + const load = this.load.bind(this); + this.load = function (context: any, config: any, callbacks: any) { + // 拦截manifest和level请求 + if ( + (context as any).type === 'manifest' || + (context as any).type === 'level' + ) { + const onSuccess = callbacks.onSuccess; + callbacks.onSuccess = function ( + response: any, + stats: any, + context: any + ) { + // 如果是m3u8文件，处理内容以移除广告分段 + if (response.data && typeof response.data === 'string') { + // 过滤掉广告段 - 实现更精确的广告过滤逻辑 + response.data = filterAdsFromM3U8(response.data); + } + return onSuccess(response, stats, context, null); + }; + } + // 执行原始load方法 + load(context, config, callbacks); + }; + }; + }; } // 当集数索引变化时自动更新视频地址 @@ -798,97 +1177,76 @@ function PlayPageClient() { }; const initAll = async () => { - console.log('播放页面初始化参数:', { - currentSource, - currentId, - videoTitle, - searchTitle, - shortdramaId, - videoYear, - allSearchParams: Array.from(searchParams.entries()) - }); - - if (!currentSource && !currentId && !videoTitle && !searchTitle && !shortdramaId) { - console.error('缺少必要参数，所有参数都为空'); - setError('缺少必要参数'); - setLoading(false); - return; - } - - // 如果是短剧，直接调用短剧全集地址API + // 检查是否为短剧播放 if (shortdramaId) { - - setLoadingStage('fetching'); - setLoadingMessage('🎬 正在获取短剧播放源...'); - try { - const apiUrl = `/api/shortdrama/parse/all?id=${shortdramaId}`; - const response = await fetch(apiUrl); + setLoading(true); + setLoadingStage('fetching'); + setLoadingMessage('🎬 正在获取短剧播放信息...'); - if (!response.ok) { - throw new Error(`获取短剧播放源失败: ${response.status}`); - } - const data = await response.json(); + const shortDramaData = await fetchShortDramaData(shortdramaId); - // 验证API响应格式 - if (!data || !Array.isArray(data.results)) { - throw new Error('API响应格式不正确或results为空'); + setCurrentSource(shortDramaData.source); + setCurrentId(shortDramaData.id); + setVideoTitle(shortDramaData.title); + setVideoYear(shortDramaData.year); + setVideoCover(shortDramaData.poster); + setVideoDoubanId(shortDramaData.douban_id || 0); + setDetail(shortDramaData); + setAvailableSources([shortDramaData]); + + if (currentEpisodeIndex >= shortDramaData.episodes.length) { + setCurrentEpisodeIndex(0); } - // 按index排序，确保从第0集开始 - const sortedResults = data.results - .filter((item: any) => item.status === 'success' && item.parsedUrl) - .sort((a: any, b: any) => a.index - b.index); - - if (sortedResults.length === 0) { - throw new Error('没有可用的播放地址'); - } - - // 构造播放地址和集数标题数组，确保从index 0开始 - const episodes = sortedResults.map((item: any) => item.parsedUrl); - const episodes_titles = sortedResults.map((item: any) => item.label || `第${item.index + 1}集`); - - const detailData: SearchResult = { - id: shortdramaId, - source: 'shortdrama', - source_name: '短剧', - title: data.videoName || videoTitle || '短剧播放', - year: videoYear || new Date().getFullYear().toString(), - poster: data.cover || '', - douban_id: 0, - episodes: episodes, - episodes_titles: episodes_titles, - desc: data.description || '暂无剧情简介', // 添加描述信息字段 - class: vodClass || '', // 使用从URL参数获取的分类字段 - tag: vodTag || '', // 使用从URL参数获取的标签字段 - }; - - setVideoTitle(detailData.title); - setVideoYear(detailData.year); - setVideoCover(detailData.poster); - setDetail(detailData); - setCurrentSource('shortdrama'); - setCurrentId(shortdramaId); + // 规范URL参数 + const newUrl = new URL(window.location.href); + newUrl.searchParams.set('source', shortDramaData.source); + newUrl.searchParams.set('id', shortDramaData.id); + newUrl.searchParams.set('title', shortDramaData.title); + newUrl.searchParams.set('year', shortDramaData.year); + window.history.replaceState({}, '', newUrl.toString()); setLoadingStage('ready'); - setLoadingMessage('✨ 短剧播放源准备就绪...'); - - // 获取推荐短剧 - 强制调用，因为是短剧页面 - setTimeout(() => { - fetchRecommendedShortDramas(true); - }, 1500); + setLoadingMessage('✨ 短剧准备就绪，即将开始播放...'); + // 短暂延迟让用户看到完成状态 setTimeout(() => { setLoading(false); }, 1000); return; } catch (error) { - setError(`获取短剧播放源失败: ${error instanceof Error ? error.message : String(error)}`); + console.error('短剧初始化失败:', error); + + // 提供更详细和用户友好的错误信息 + let errorMessage = '短剧加载失败'; + + if (error instanceof Error) { + if (error.message.includes('网络')) { + errorMessage = '网络连接失败，请检查网络设置后重试'; + } else if (error.message.includes('未找到')) { + errorMessage = '未找到该短剧的播放资源，可能已被移除'; + } else if (error.message.includes('数据为空')) { + errorMessage = '短剧数据异常，请稍后重试'; + } else if (error.message.includes('超时')) { + errorMessage = '请求超时，请检查网络后重试'; + } else { + errorMessage = error.message; + } + } + + setError(errorMessage); setLoading(false); return; } } + + if (!currentSource && !currentId && !videoTitle && !searchTitle) { + setError('缺少必要参数'); + setLoading(false); + return; + } setLoading(true); setLoadingStage(currentSource && currentId ? 'fetching' : 'searching'); setLoadingMessage( @@ -972,7 +1330,7 @@ function PlayPageClient() { }; initAll(); - }, []); + }, [shortdramaId]); // 播放记录处理 useEffect(() => { @@ -1161,11 +1519,6 @@ function PlayPageClient() { // --------------------------------------------------------------------------- // 处理全局快捷键 const handleKeyboardShortcuts = (e: KeyboardEvent) => { - // 检查组件是否已卸载 - if (!isComponentMountedRef.current) { - return; - } - // 忽略输入框中的按键事件 if ( (e.target as HTMLElement).tagName === 'INPUT' || @@ -1193,7 +1546,7 @@ function PlayPageClient() { // 左箭头 = 快退 if (!e.altKey && e.key === 'ArrowLeft') { - if (isComponentMountedRef.current && artPlayerRef.current && artPlayerRef.current.currentTime > 5) { + if (artPlayerRef.current && artPlayerRef.current.currentTime > 5) { artPlayerRef.current.currentTime -= 10; e.preventDefault(); } @@ -1202,7 +1555,6 @@ function PlayPageClient() { // 右箭头 = 快进 if (!e.altKey && e.key === 'ArrowRight') { if ( - isComponentMountedRef.current && artPlayerRef.current && artPlayerRef.current.currentTime < artPlayerRef.current.duration - 5 ) { @@ -1213,35 +1565,31 @@ function PlayPageClient() { // 上箭头 = 音量+ if (e.key === 'ArrowUp') { - if (isComponentMountedRef.current && artPlayerRef.current && artPlayerRef.current.volume < 1) { + if (artPlayerRef.current && artPlayerRef.current.volume < 1) { artPlayerRef.current.volume = Math.round((artPlayerRef.current.volume + 0.1) * 10) / 10; - if (artPlayerRef.current.notice) { - artPlayerRef.current.notice.show = `音量: ${Math.round( - artPlayerRef.current.volume * 100 - )}`; - } + artPlayerRef.current.notice.show = `音量: ${Math.round( + artPlayerRef.current.volume * 100 + )}`; e.preventDefault(); } } // 下箭头 = 音量- if (e.key === 'ArrowDown') { - if (isComponentMountedRef.current && artPlayerRef.current && artPlayerRef.current.volume > 0) { + if (artPlayerRef.current && artPlayerRef.current.volume > 0) { artPlayerRef.current.volume = Math.round((artPlayerRef.current.volume - 0.1) * 10) / 10; - if (artPlayerRef.current.notice) { - artPlayerRef.current.notice.show = `音量: ${Math.round( - artPlayerRef.current.volume * 100 - )}`; - } + artPlayerRef.current.notice.show = `音量: ${Math.round( + artPlayerRef.current.volume * 100 + )}`; e.preventDefault(); } } // 空格 = 播放/暂停 if (e.key === ' ') { - if (isComponentMountedRef.current && artPlayerRef.current) { + if (artPlayerRef.current) { artPlayerRef.current.toggle(); e.preventDefault(); } @@ -1249,7 +1597,7 @@ function PlayPageClient() { // f 键 = 切换全屏 if (e.key === 'f' || e.key === 'F') { - if (isComponentMountedRef.current && artPlayerRef.current) { + if (artPlayerRef.current) { artPlayerRef.current.fullscreen = !artPlayerRef.current.fullscreen; e.preventDefault(); } @@ -1261,11 +1609,6 @@ function PlayPageClient() { // --------------------------------------------------------------------------- // 保存播放进度 const saveCurrentPlayProgress = async () => { - // 检查组件是否已卸载 - if (!isComponentMountedRef.current) { - return; - } - if ( !artPlayerRef.current || !currentSourceRef.current || @@ -1341,7 +1684,7 @@ function PlayPageClient() { window.removeEventListener('beforeunload', handleBeforeUnload); document.removeEventListener('visibilitychange', handleVisibilityChange); }; - }, [currentEpisodeIndex, detail]); + }, [currentEpisodeIndex, detail, artPlayerRef.current]); // 清理定时器 useEffect(() => { @@ -1419,8 +1762,9 @@ function PlayPageClient() { useEffect(() => { if ( - !Artplayer || - !Hls || + !dynamicDeps?.Artplayer || + !dynamicDeps?.Hls || + !dynamicDeps?.artplayerPluginDanmuku || !videoUrl || loading || currentEpisodeIndex === null || @@ -1429,6 +1773,8 @@ function PlayPageClient() { return; } + const { Artplayer, Hls, artplayerPluginDanmuku } = dynamicDeps; + // 确保选集索引有效 if ( !detail || @@ -1453,16 +1799,14 @@ function PlayPageClient() { // 非WebKit浏览器且播放器已存在，使用switch方法切换 if (!isWebkit && artPlayerRef.current) { - const finalVideoUrl = getProxyUrl(videoUrl); - - artPlayerRef.current.switch = finalVideoUrl; + artPlayerRef.current.switch = videoUrl; artPlayerRef.current.title = `${videoTitle} - 第${currentEpisodeIndex + 1 }集`; artPlayerRef.current.poster = videoCover; if (artPlayerRef.current?.video) { ensureVideoSource( artPlayerRef.current.video as HTMLVideoElement, - finalVideoUrl + videoUrl ); } return; @@ -1478,11 +1822,16 @@ function PlayPageClient() { Artplayer.PLAYBACK_RATE = [0.5, 0.75, 1, 1.25, 1.5, 2, 3]; Artplayer.USE_RAF = true; - const finalVideoUrl = getProxyUrl(videoUrl); + // 生成当前视频的唯一ID + const currentVideoId = generateVideoId( + currentSourceRef.current, + currentIdRef.current, + currentEpisodeIndex + ); artPlayerRef.current = new Artplayer({ container: artRef.current, - url: finalVideoUrl, + url: videoUrl, poster: videoCover, volume: 0.7, isLive: false, @@ -1513,169 +1862,9 @@ function PlayPageClient() { lock: true, moreVideoAttr: { crossOrigin: 'anonymous', - preload: 'metadata', }, - plugins: [ - artplayerPluginDanmuku({ - danmuku: async () => { - try { - // 检查组件是否已卸载 - if (!isComponentMountedRef.current || !artPlayerRef.current) { - return []; - } - - // 生成弹幕唯一ID（基于视频源和ID） - const videoId = `${currentSource}-${currentId}`; - const response = await fetch(`/api/danmu?videoId=${encodeURIComponent(videoId)}`); - - // 再次检查组件是否已卸载 - if (!isComponentMountedRef.current || !artPlayerRef.current) { - return []; - } - - if (response.ok) { - const data = await response.json(); - return data; - } - return []; - } catch (error) { - console.error('获取弹幕失败:', error); - return []; - } - }, - speed: 8, // 弹幕持续时间，单位秒 - opacity: 0.8, // 弹幕透明度 - fontSize: 20, // 字体大小 - color: '#FFFFFF', // 默认字体颜色 - mode: 0, // 默认模式，0-滚动，1-顶部，2-底部 - margin: [10, '20%'], // 弹幕上下边距 - antiOverlap: true, // 防重叠 - filter: (danmu: any) => danmu?.text && danmu.text.length <= 100, // 弹幕过滤 - theme: 'dark', // 输入框主题 - beforeEmit: async (danmu: any) => { - try { - // 验证弹幕内容 - if (!danmu?.text || !danmu.text.trim()) { - return false; - } - - // 检查组件挂载状态和播放器是否仍然存在 - const currentPlayer = artPlayerRef.current; - if (!isComponentMountedRef.current || !currentPlayer) { - return false; - } - - // 发送弹幕到服务器 - const videoId = `${currentSource}-${currentId}`; - const currentTime = currentPlayer.currentTime || 0; - - const response = await fetch('/api/danmu', { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - videoId, - text: danmu.text.trim(), - color: danmu.color || '#FFFFFF', - mode: danmu.mode || 0, - time: currentTime, - }), - }); - - // 再次检查组件挂载状态和播放器是否仍然存在 - const playerAfterRequest = artPlayerRef.current; - if (!isComponentMountedRef.current || !playerAfterRequest) { - return false; - } - - if (response.ok) { - const result = await response.json(); - if (result.success) { - console.log('弹幕发送成功'); - return true; - } - } else { - const error = await response.json(); - console.error('发送弹幕失败:', error.error); - if (playerAfterRequest && typeof playerAfterRequest.notice?.show !== 'undefined') { - playerAfterRequest.notice.show = `发送失败: ${error.error}`; - } - } - return false; - } catch (error) { - console.error('发送弹幕出错:', error); - const currentPlayer = artPlayerRef.current; - if (isComponentMountedRef.current && currentPlayer && typeof currentPlayer.notice?.show !== 'undefined') { - currentPlayer.notice.show = '发送弹幕失败'; - } - return false; - } - }, - }), - ], - // HLS 和 MP4 支持配置 + // HLS 支持配置 customType: { - mp4: async function (video: HTMLVideoElement, url: string) { - console.log('Loading MP4 video:', url); - - // 对于需要代理的视频文件，通过代理API来避免403错误 - if (needsProxyUrl(url)) { - console.log('Using proxy for MP4 video URL:', url); - - // 先测试URL的可达性 - try { - console.log('Testing video URL accessibility...'); - const testResponse = await fetch(`/api/proxy/video/test?url=${encodeURIComponent(url)}`); - const testData = await testResponse.json(); - console.log('Video URL test results:', testData); - } catch (testError) { - console.warn('URL test failed, proceeding with proxy anyway:', testError); - } - - const proxyUrl = getProxyUrl(url); - - // 设置视频元素的属性 - video.crossOrigin = 'anonymous'; - video.preload = 'metadata'; - video.setAttribute('playsinline', 'true'); - - // 使用代理URL - video.src = proxyUrl; - - // 添加更详细的错误处理 - video.onerror = function (e) { - console.error('Proxy video load error:', e); - console.error('Video error details:', { - error: video.error, - networkState: video.networkState, - readyState: video.readyState, - currentSrc: video.currentSrc - }); - console.log('Trying direct URL as fallback...'); - - // 作为备用方案，尝试直接加载 - video.crossOrigin = null; // 重置跨域设置 - video.src = url; - }; - - // 添加加载成功的日志 - video.onloadstart = function () { - console.log('Video started loading through proxy'); - }; - - video.oncanplay = function () { - console.log('Video can start playing through proxy'); - }; - - } else { - console.log('Loading video directly:', url); - // 对于其他来源的MP4，直接加载 - video.src = url; - video.crossOrigin = 'anonymous'; - video.preload = 'metadata'; - } - }, m3u8: function (video: HTMLVideoElement, url: string) { if (!Hls) { console.error('HLS.js 未加载'); @@ -1683,60 +1872,92 @@ function PlayPageClient() { } if (video.hls) { - try { - video.hls.destroy(); - } catch (err) { - console.warn('销毁旧HLS实例时出错:', err); - } - video.hls = null; + video.hls.destroy(); } - // 检查是否需要使用代理URL - const finalUrl = getProxyUrl(url); + const CustomHlsJsLoader = createCustomHlsJsLoader(Hls); - const hls = new Hls({ + // 针对短剧的特殊配置 + const isShortDrama = currentSourceRef.current === 'shortdrama'; + const hlsConfig = { debug: false, // 关闭日志 enableWorker: true, // WebWorker 解码，降低主线程压力 - lowLatencyMode: true, // 开启低延迟 LL-HLS + lowLatencyMode: !isShortDrama, // 短剧关闭低延迟模式，提高兼容性 - /* 缓冲/内存相关 */ - maxBufferLength: 30, // 前向缓冲最大 30s，过大容易导致高延迟 - backBufferLength: 30, // 仅保留 30s 已播放内容，避免内存占用 - maxBufferSize: 60 * 1000 * 1000, // 约 60MB，超出后触发清理 + /* 缓冲/内存相关 - 短剧使用更保守的设置 */ + maxBufferLength: isShortDrama ? 20 : 30, // 短剧使用较小缓冲 + backBufferLength: isShortDrama ? 15 : 30, // 短剧保留更少已播放内容 + maxBufferSize: isShortDrama ? 40 * 1000 * 1000 : 60 * 1000 * 1000, // 短剧使用更小缓冲区 + + /* 网络相关 - 短剧更宽松的超时设置 */ + manifestLoadingTimeOut: isShortDrama ? 20000 : 10000, + manifestLoadingMaxRetry: isShortDrama ? 4 : 1, + levelLoadingTimeOut: isShortDrama ? 20000 : 10000, + levelLoadingMaxRetry: isShortDrama ? 4 : 3, + fragLoadingTimeOut: isShortDrama ? 30000 : 20000, + fragLoadingMaxRetry: isShortDrama ? 6 : 3, /* 自定义loader */ loader: blockAdEnabledRef.current ? CustomHlsJsLoader : Hls.DefaultConfig.loader, + }; + + console.log('HLS配置:', { + isShortDrama, + url: url.includes('/api/proxy/video') ? '使用代理' : '直接访问', + config: hlsConfig }); - hls.loadSource(finalUrl); + const hls = new Hls(hlsConfig); + + hls.loadSource(url); hls.attachMedia(video); video.hls = hls; - ensureVideoSource(video, finalUrl); + ensureVideoSource(video, url); hls.on(Hls.Events.ERROR, function (event: any, data: any) { - console.error('HLS Error:', event, data); + const errorInfo = { + type: data.type, + details: data.details, + fatal: data.fatal, + isShortDrama, + url: url.includes('/api/proxy/video') ? '代理地址' : '原始地址' + }; + console.error('HLS播放错误:', errorInfo); + if (data.fatal) { switch (data.type) { case Hls.ErrorTypes.NETWORK_ERROR: - console.log('网络错误，尝试恢复...'); - hls.startLoad(); + console.log('网络错误，尝试恢复...', data.details); + if (isShortDrama && data.details === 'manifestLoadError') { + // 短剧清单加载失败，尝试重新加载 + setTimeout(() => { + if (hls && !hls.destroyed) { + hls.startLoad(); + } + }, 1000); + } else { + hls.startLoad(); + } break; case Hls.ErrorTypes.MEDIA_ERROR: - console.log('媒体错误，尝试恢复...'); + console.log('媒体错误，尝试恢复...', data.details); hls.recoverMediaError(); break; default: - console.log('无法恢复的错误'); - try { - hls.destroy(); - } catch (destroyErr) { - console.warn('销毁HLS时出错:', destroyErr); + console.log('无法恢复的错误:', data.type, data.details); + if (isShortDrama) { + // 短剧播放失败时给出更明确的提示 + artPlayerRef.current?.notice?.show?.(`短剧播放出错: ${data.details || '未知错误'}`); } + hls.destroy(); break; } + } else { + // 非致命错误，记录但继续播放 + console.warn('HLS非致命错误:', errorInfo); } }); }, @@ -1745,6 +1966,48 @@ function PlayPageClient() { loading: '', }, + plugins: danmuEnabled ? [ + artplayerPluginDanmuku({ + danmuku: async () => { + return await loadDanmuData(currentVideoId); + }, + speed: 5, // 弹幕速度 + opacity: 1, // 透明度 + fontSize: 25, // 字体大小 + color: '#FFFFFF', // 默认颜色 + mode: 0, // 弹幕模式 + margin: [10, '25%'], // 边距 + antiOverlap: true, // 防重叠 + useWorker: true, // 使用 WebWorker + synchronousPlayback: false, // 非同步播放 + filter: (danmu: any) => danmu.text.length < 50, // 过滤长弹幕 + lockTime: 5, // 锁定时间 + maxLength: 100, // 最大长度 + minWidth: 200, // 最小宽度 + maxWidth: 500, // 最大宽度 + theme: 'dark', // 主题 + beforeVisible: (danmu: any) => { + // 可在此处添加额外的过滤逻辑 + return !danmu.text.includes('广告'); + }, + beforeEmit: async (danmu: any) => { + // 发送弹幕前的处理 + try { + await sendDanmu(currentVideoId, { + text: danmu.text, + color: danmu.color || '#FFFFFF', + mode: danmu.mode || 0, + time: artPlayerRef.current?.currentTime || 0 + }); + return danmu; + } catch (error) { + console.error('发送弹幕失败:', error); + artPlayerRef.current?.notice?.show?.('发送弹幕失败：' + (error as any).message); + throw error; + } + } + }) + ] : [], settings: [ { html: '去广告', @@ -1756,22 +2019,14 @@ function PlayPageClient() { localStorage.setItem('enable_blockad', String(newVal)); if (artPlayerRef.current) { resumeTimeRef.current = artPlayerRef.current.currentTime; - const player = artPlayerRef.current; - artPlayerRef.current = null; // 先清空引用 - - if (player.video && player.video.hls) { - try { - player.video.hls.destroy(); - } catch (err) { - console.warn('清理HLS实例失败:', err); - } - } - - try { - player.destroy(); - } catch (err) { - console.warn('销毁播放器失败:', err); + if ( + artPlayerRef.current.video && + artPlayerRef.current.video.hls + ) { + artPlayerRef.current.video.hls.destroy(); } + artPlayerRef.current.destroy(); + artPlayerRef.current = null; } setBlockAdEnabled(newVal); } catch (_) { @@ -1780,11 +2035,37 @@ function PlayPageClient() { return newVal ? '当前开启' : '当前关闭'; }, }, + { + html: '弹幕设置', + icon: '弹', + tooltip: danmuEnabled ? '弹幕已开启' : '弹幕已关闭', + onClick() { + const newVal = !danmuEnabled; + try { + localStorage.setItem('enableDanmu', String(newVal)); + if (artPlayerRef.current) { + resumeTimeRef.current = artPlayerRef.current.currentTime; + if ( + artPlayerRef.current.video && + artPlayerRef.current.video.hls + ) { + artPlayerRef.current.video.hls.destroy(); + } + artPlayerRef.current.destroy(); + artPlayerRef.current = null; + } + setDanmuEnabled(newVal); + } catch (_) { + // ignore + } + return newVal ? '弹幕已开启' : '弹幕已关闭'; + }, + }, { name: '跳过片头片尾', html: '跳过片头片尾', switch: skipConfigRef.current.enable, - onSwitch: function (item) { + onSwitch: function (item: any) { const newConfig = { ...skipConfigRef.current, enable: !item.switch, @@ -1813,7 +2094,6 @@ function PlayPageClient() { ? '设置片头时间' : `${formatTime(skipConfigRef.current.intro_time)}`, onClick: function () { - if (!isComponentMountedRef.current || !artPlayerRef.current) return; const currentTime = artPlayerRef.current?.currentTime || 0; if (currentTime > 0) { const newConfig = { @@ -1834,7 +2114,6 @@ function PlayPageClient() { ? '设置片尾时间' : `-${formatTime(-skipConfigRef.current.outro_time)}`, onClick: function () { - if (!isComponentMountedRef.current || !artPlayerRef.current) return; const outroTime = -( artPlayerRef.current?.duration - @@ -1869,6 +2148,17 @@ function PlayPageClient() { artPlayerRef.current.on('ready', () => { setError(null); + // 短剧播放状态日志 + const isShortDrama = currentSourceRef.current === 'shortdrama'; + if (isShortDrama) { + console.log('短剧播放器就绪:', { + title: videoTitle, + episode: currentEpisodeIndex + 1, + url: videoUrl.includes('/api/proxy/video') ? '使用代理' : '直接播放', + videoElement: artPlayerRef.current?.video ? '视频元素正常' : '视频元素异常' + }); + } + // 播放器就绪后，如果正在播放则请求 Wake Lock if (artPlayerRef.current && !artPlayerRef.current.paused) { requestWakeLock(); @@ -1877,18 +2167,15 @@ function PlayPageClient() { // 监听播放状态变化，控制 Wake Lock artPlayerRef.current.on('play', () => { - if (!isComponentMountedRef.current) return; requestWakeLock(); }); artPlayerRef.current.on('pause', () => { - if (!isComponentMountedRef.current) return; releaseWakeLock(); saveCurrentPlayProgress(); }); artPlayerRef.current.on('video:ended', () => { - if (!isComponentMountedRef.current) return; releaseWakeLock(); }); @@ -1898,18 +2185,14 @@ function PlayPageClient() { } artPlayerRef.current.on('video:volumechange', () => { - if (!isComponentMountedRef.current || !artPlayerRef.current) return; lastVolumeRef.current = artPlayerRef.current.volume; }); artPlayerRef.current.on('video:ratechange', () => { - if (!isComponentMountedRef.current || !artPlayerRef.current) return; lastPlaybackRateRef.current = artPlayerRef.current.playbackRate; }); // 监听视频可播放事件，这时恢复播放进度更可靠 artPlayerRef.current.on('video:canplay', () => { - if (!isComponentMountedRef.current || !artPlayerRef.current) return; - // 若存在需要恢复的播放进度，则跳转 if (resumeTimeRef.current && resumeTimeRef.current > 0) { try { @@ -1927,8 +2210,6 @@ function PlayPageClient() { resumeTimeRef.current = null; setTimeout(() => { - if (!isComponentMountedRef.current || !artPlayerRef.current) return; - if ( Math.abs(artPlayerRef.current.volume - lastVolumeRef.current) > 0.01 ) { @@ -1942,9 +2223,7 @@ function PlayPageClient() { ) { artPlayerRef.current.playbackRate = lastPlaybackRateRef.current; } - if (artPlayerRef.current.notice) { - artPlayerRef.current.notice.show = ''; - } + artPlayerRef.current.notice.show = ''; }, 0); // 隐藏换源加载状态 @@ -1953,7 +2232,7 @@ function PlayPageClient() { // 监听视频时间更新事件，实现跳过片头片尾 artPlayerRef.current.on('video:timeupdate', () => { - if (!isComponentMountedRef.current || !artPlayerRef.current || !skipConfigRef.current.enable) return; + if (!skipConfigRef.current.enable) return; const currentTime = artPlayerRef.current.currentTime || 0; const duration = artPlayerRef.current.duration || 0; @@ -1996,10 +2275,28 @@ function PlayPageClient() { }); artPlayerRef.current.on('error', (err: any) => { - console.error('播放器错误:', err); - if (!isComponentMountedRef.current || !artPlayerRef.current) { - return; + const isShortDrama = currentSourceRef.current === 'shortdrama'; + const errorInfo = { + error: err, + isShortDrama, + currentTime: artPlayerRef.current?.currentTime || 0, + videoUrl: videoUrl.includes('/api/proxy/video') ? '代理地址' : '原始地址', + episode: currentEpisodeIndex + 1 + }; + + console.error('播放器错误:', errorInfo); + + if (isShortDrama) { + // 短剧播放错误的特殊处理 + console.error('短剧播放错误详情:', { + source: currentSourceRef.current, + id: currentIdRef.current, + episode: currentEpisodeIndex + 1, + url: videoUrl, + hasPlayedTime: (artPlayerRef.current?.currentTime || 0) > 0 + }); } + if (artPlayerRef.current.currentTime > 0) { return; } @@ -2007,22 +2304,16 @@ function PlayPageClient() { // 监听视频播放结束事件，自动播放下一集 artPlayerRef.current.on('video:ended', () => { - if (!isComponentMountedRef.current) return; - const d = detailRef.current; const idx = currentEpisodeIndexRef.current; if (d && d.episodes && idx < d.episodes.length - 1) { setTimeout(() => { - if (isComponentMountedRef.current) { - setCurrentEpisodeIndex(idx + 1); - } + setCurrentEpisodeIndex(idx + 1); }, 1000); } }); artPlayerRef.current.on('video:timeupdate', () => { - if (!isComponentMountedRef.current || !artPlayerRef.current) return; - const now = Date.now(); let interval = 5000; if (process.env.NEXT_PUBLIC_STORAGE_TYPE === 'upstash') { @@ -2035,7 +2326,6 @@ function PlayPageClient() { }); artPlayerRef.current.on('pause', () => { - if (!isComponentMountedRef.current) return; saveCurrentPlayProgress(); }); @@ -2049,25 +2339,14 @@ function PlayPageClient() { console.error('创建播放器失败:', err); setError('播放器初始化失败'); } - }, [Artplayer, Hls, videoUrl, loading, blockAdEnabled]); + }, [dynamicDeps, videoUrl, loading, blockAdEnabled, danmuEnabled, currentEpisodeIndex, currentSource, currentId]); - // 组件挂载时的初始化和卸载时的清理 + // 当组件卸载时清理定时器、Wake Lock 和播放器资源 useEffect(() => { - // 组件挂载时，确保先清理任何可能残留的资源 - console.log('播放页面组件挂载，进行初始化清理'); - cleanupPlayer(); - isComponentMountedRef.current = true; - return () => { - // 标记组件已卸载 - isComponentMountedRef.current = false; - - console.log('播放页面组件卸载，进行资源清理'); - // 清理定时器 if (saveIntervalRef.current) { clearInterval(saveIntervalRef.current); - saveIntervalRef.current = null; } // 释放 Wake Lock @@ -2085,7 +2364,7 @@ function PlayPageClient() {
{/* 动画影院图标 */}
-
+
{loadingStage === 'searching' && '🔍'} {loadingStage === 'preferring' && '⚡'} @@ -2093,18 +2372,18 @@ function PlayPageClient() { {loadingStage === 'ready' && '✨'}
{/* 旋转光环 */} -
+
{/* 浮动粒子效果 */}
@@ -2141,7 +2420,7 @@ function PlayPageClient() { {/* 进度条 */}
{videoTitle ? '🔍 返回搜索' : '← 返回上页'} @@ -2313,21 +2592,21 @@ function PlayPageClient() {
{/* 动画影院图标 */}
-
+
🎬
{/* 旋转光环 */} -
+
{/* 浮动粒子效果 */}
@@ -2409,34 +2688,40 @@ function PlayPageClient() { {detail?.type_name && {detail.type_name}}
- {/* 标签展示 */} - {detail?.tag && ( + {/* 短剧专用标签展示 */} + {shortdramaId && (vodClass || vodTag) && (
-
- {detail.tag.split(',').filter(tag => tag.trim()).map((tag, index) => { - // 根据不同标签设置不同颜色 - const getTagColor = (tagName: string) => { - const lowerTag = tagName.toLowerCase(); - if (lowerTag.includes('甜宠') || lowerTag.includes('甜')) return 'bg-pink-100 text-pink-600 border-pink-200'; - if (lowerTag.includes('霸总') || lowerTag.includes('总裁')) return 'bg-purple-100 text-purple-600 border-purple-200'; - if (lowerTag.includes('现代') || lowerTag.includes('都市')) return 'bg-blue-100 text-blue-600 border-blue-200'; - if (lowerTag.includes('古装') || lowerTag.includes('古代')) return 'bg-amber-100 text-amber-600 border-amber-200'; - if (lowerTag.includes('穿越')) return 'bg-green-100 text-green-600 border-green-200'; - if (lowerTag.includes('重生') || lowerTag.includes('逆袭')) return 'bg-indigo-100 text-indigo-600 border-indigo-200'; - if (lowerTag.includes('复仇') || lowerTag.includes('虐渣')) return 'bg-red-100 text-red-600 border-red-200'; - if (lowerTag.includes('家庭') || lowerTag.includes('伦理')) return 'bg-teal-100 text-teal-600 border-teal-200'; - return 'bg-gray-100 text-gray-600 border-gray-200'; // 默认颜色 - }; - - return ( - - {tag.trim()} +
+ {/* vod_class 标签 - 分类标签 */} + {vodClass && ( +
+ + 分类: - ); - })} + + 📂 {vodClass} + +
+ )} + + {/* vod_tag 标签 - 内容标签 */} + {vodTag && parseVodTags(vodTag).length > 0 && ( +
+ + 标签: + + {parseVodTags(vodTag).map((tag, index) => ( + + 🏷️ {tag} + + ))} +
+ )}
)} @@ -2499,211 +2784,6 @@ function PlayPageClient() {
- - {/* 推荐短剧区域 */} - {currentSource === 'shortdrama' && ( -
-
-

- 🎭 推荐短剧 -

-

- 为你精选更多精彩短剧 -

-
- - {recommendLoading ? ( -
-
-
- ) : recommendedShortDramas && recommendedShortDramas.items.length > 0 ? ( -
- {recommendedShortDramas?.items.map((drama) => ( -
-
{ - e.preventDefault(); - e.stopPropagation(); - - const urlParams = new URLSearchParams(); - urlParams.set('shortdrama_id', drama.vod_id.toString()); - urlParams.set('title', drama.name); - if (drama.vod_class) urlParams.set('vod_class', drama.vod_class); - if (drama.vod_tag) urlParams.set('vod_tag', drama.vod_tag); - - const url = `/play?${urlParams.toString()}`; - // 使用window.location.href来触发完整的页面导航，包括加载页面 - window.location.href = url; - }} - style={{ - WebkitUserSelect: 'none', - userSelect: 'none', - WebkitTouchCallout: 'none', - WebkitTapHighlightColor: 'transparent', - touchAction: 'manipulation', - pointerEvents: 'auto', - } as React.CSSProperties} - onContextMenu={(e) => { - e.preventDefault(); - return false; - }} - > - {/* 封面容器 */} -
- {drama.cover ? ( - {drama.name} { - const target = e.target as HTMLImageElement; - target.src = 'https://via.placeholder.com/300x400?text=暂无封面'; - }} - style={{ - WebkitUserSelect: 'none', - userSelect: 'none', - WebkitTouchCallout: 'none', - } as React.CSSProperties} - /> - ) : ( -
- 暂无封面 -
- )} - - {/* 评分标识 */} - {drama.score && drama.score > 0 && ( -
- ⭐ - {drama.score} -
- )} - - {/* 集数标识 */} - {drama.total_episodes && ( -
- {drama.total_episodes}集 -
- )} - - {/* 播放按钮 */} -
{ - e.preventDefault(); - return false; - }} - > - { - e.preventDefault(); - return false; - }} - /> -
-
- - {/* 标题与来源 */} -
-
- - {drama.name} - - {/* 自定义 tooltip */} -
- {drama.name} -
-
-
- - - 短剧 - - -
-
-
- ))} -
- ) : ( -
- {!recommendedShortDramas ? '正在加载推荐内容...' : '暂无推荐内容'} -
- )} -
- )} - -
); @@ -2740,4 +2820,4 @@ export default function PlayPage() { ); -} +} \ No newline at end of file diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx index 01776b0..8adc13d 100644 --- a/src/app/search/page.tsx +++ b/src/app/search/page.tsx @@ -433,6 +433,10 @@ function SearchPageClient() { clearTimeout(flushTimerRef.current); flushTimerRef.current = null; } + + // 清理聚合统计缓存和refs，防止数据污染 + groupStatsRef.current.clear(); + groupRefs.current.clear(); setIsLoading(true); setShowResults(true); @@ -464,7 +468,11 @@ function SearchPageClient() { if (!event.data) return; try { const payload = JSON.parse(event.data); - if (currentQueryRef.current !== trimmed) return; + // 强化竞态条件检查：确保是当前查询的响应 + if (currentQueryRef.current !== trimmed || eventSourceRef.current !== es) { + console.warn('忽略过期的搜索响应:', payload.type, '当前查询:', currentQueryRef.current, '响应查询:', trimmed); + return; + } switch (payload.type) { case 'start': setTotalSources(payload.totalSources || 0); @@ -544,7 +552,11 @@ function SearchPageClient() { fetch(`/api/search?q=${encodeURIComponent(trimmed)}`) .then(response => response.json()) .then(data => { - if (currentQueryRef.current !== trimmed) return; + // 强化竞态条件检查：确保是当前查询的响应 + if (currentQueryRef.current !== trimmed) { + console.warn('忽略过期的搜索响应 (传统):', '当前查询:', currentQueryRef.current, '响应查询:', trimmed); + return; + } if (data.results && Array.isArray(data.results)) { const activeYearOrder = (viewMode === 'agg' ? (filterAgg.yearOrder) : (filterAll.yearOrder)); @@ -573,7 +585,7 @@ function SearchPageClient() { } }, [searchParams]); - // 组件卸载时，关闭可能存在的连接 + // 组件卸载时，关闭可能存在的连接并清理所有状态 useEffect(() => { return () => { if (eventSourceRef.current) { @@ -585,6 +597,11 @@ function SearchPageClient() { flushTimerRef.current = null; } pendingResultsRef.current = []; + // 清理聚合统计缓存和refs，防止状态泄露 + groupStatsRef.current.clear(); + groupRefs.current.clear(); + // 重置当前查询引用 + currentQueryRef.current = ''; }; }, []); @@ -613,6 +630,12 @@ function SearchPageClient() { const trimmed = searchQuery.trim().replace(/\s+/g, ' '); if (!trimmed) return; + // 清理所有状态和缓存，确保搜索结果干净 + setSearchResults([]); + pendingResultsRef.current = []; + groupStatsRef.current.clear(); + groupRefs.current.clear(); + // 回显搜索框 setSearchQuery(trimmed); setIsLoading(true); @@ -624,6 +647,12 @@ function SearchPageClient() { }; const handleSuggestionSelect = (suggestion: string) => { + // 清理所有状态和缓存，确保搜索结果干净 + setSearchResults([]); + pendingResultsRef.current = []; + groupStatsRef.current.clear(); + groupRefs.current.clear(); + setSearchQuery(suggestion); setShowSuggestions(false); @@ -695,6 +724,12 @@ function SearchPageClient() { const trimmed = searchQuery.trim().replace(/\s+/g, ' '); if (!trimmed) return; + // 清理所有状态和缓存，确保搜索结果干净 + setSearchResults([]); + pendingResultsRef.current = []; + groupStatsRef.current.clear(); + groupRefs.current.clear(); + // 回显搜索框 setSearchQuery(trimmed); setIsLoading(true); @@ -858,6 +893,12 @@ function SearchPageClient() {
+
+ + {/* 标签页 */} +
+ + +
+
+ + {/* 搜索栏 */} +
+ {activeTab === 'chat' ? ( +
+ + setSearchQuery(e.target.value)} + className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 focus:border-transparent" + /> +
+ ) : ( +
+
+ + { + setFriendSearchQuery(e.target.value); + }} + className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 focus:border-transparent" + /> +
+ + {/* 搜索结果显示在搜索框下方 */} + {searchResults.length > 0 && ( +
+
+

搜索结果

+ {searchResults.map((user) => ( +
+
+ {/* 用户头像 */} + {user.nickname { + const target = e.target as HTMLImageElement; + target.style.display = 'none'; + target.nextElementSibling?.classList.remove('hidden'); + }} + /> +
+ {(user.nickname || user.username).charAt(0).toUpperCase()} +
+ +
+
+ {user.nickname || user.username} +
+
+ {isFriend(user.username) ? '已是好友' : '陌生人'} +
+
+
+ + {!isFriend(user.username) && ( + + )} +
+ ))} +
+
+ )} +
+ )} +
+ + {/* 列表内容 */} +
+ {activeTab === 'chat' ? ( +
+ {filteredConversations.map((conv) => { + // 获取对话头像 - 私人对话显示对方头像，群聊显示群组图标 + const getConversationAvatar = () => { + if (conv.participants.length === 2) { + // 私人对话：显示对方用户的头像 + const otherUser = conv.participants.find(p => p !== currentUser?.username); + return otherUser ? ( +
+ {getDisplayName(otherUser)} { + const target = e.target as HTMLImageElement; + target.style.display = 'none'; + target.nextElementSibling?.classList.remove('hidden'); + }} + /> +
+ {getDisplayName(otherUser).charAt(0).toUpperCase()} +
+ {/* 在线状态指示器 */} +
+
+ ) : null; + } else { + // 群聊：显示群组图标和参与者头像叠加 + const firstThreeParticipants = conv.participants.slice(0, 3); + return ( +
+
+ +
+ {/* 群聊成员数量指示 */} +
+ {conv.participants.length} +
+
+ ); + } + }; + + return ( + + ); + })} +
+ ) : ( +
+ {/* 好友申请 */} + {friendRequests.filter(req => req.to_user === currentUser?.username && req.status === 'pending').length > 0 && ( +
+

好友申请

+ {friendRequests + .filter(req => req.to_user === currentUser?.username && req.status === 'pending') + .map((request) => ( +
+
+ {/* 申请者头像 */} +
+ {request.from_user} { + const target = e.target as HTMLImageElement; + target.style.display = 'none'; + target.nextElementSibling?.classList.remove('hidden'); + }} + /> +
+ {request.from_user.charAt(0).toUpperCase()} +
+
+ + {/* 申请者信息 */} +
+
+ {request.from_user} +
+
+ {new Date(request.created_at).toLocaleString('zh-CN', { + month: '2-digit', + day: '2-digit', + hour: '2-digit', + minute: '2-digit' + })} +
+
+
+ +
+ {request.message} +
+ +
+ + +
+
+ ))} +
+ )} + + {/* 好友列表 */} +

我的好友

+ {friends.map((friend) => ( + + ))} + +
+ )} +
+
+ + {/* 右侧聊天区域 */} +
+ {selectedConversation ? ( + <> + {/* 聊天头部 */} +
+
+ {/* 对话头像（显示对方用户的头像，如果是群聊则显示群组图标） */} +
+ {selectedConversation.participants.length === 2 ? ( + // 私人对话：显示对方的头像 + (() => { + const otherUser = selectedConversation.participants.find(p => p !== currentUser?.username); + return otherUser ? ( +
+ {getDisplayName(otherUser)} { + const target = e.target as HTMLImageElement; + target.style.display = 'none'; + target.nextElementSibling?.classList.remove('hidden'); + }} + /> +
+ {getDisplayName(otherUser).charAt(0).toUpperCase()} +
+ {/* 在线状态 */} +
+
+ ) : null; + })() + ) : ( + // 群聊：显示群组图标 +
+ +
+ )} +
+ +
+

+ {selectedConversation.name} +

+
+ {selectedConversation.participants.length === 2 ? ( + // 私人对话：显示在线状态 + (() => { + const otherUser = selectedConversation.participants.find(p => p !== currentUser?.username); + return otherUser ? ( + + {isUserOnline(otherUser) ? '在线' : '离线'} + • + {selectedConversation.participants.length} 人 + + ) : `${selectedConversation.participants.length} 人`; + })() + ) : ( + // 群聊：显示参与者数量 + `${selectedConversation.participants.length} 人` + )} +
+
+
+
+ + {/* 消息列表 */} +
+ {messages.map((message, index) => { + const isOwnMessage = message.sender_id === currentUser?.username; + const prevMessage = index > 0 ? messages[index - 1] : null; + const nextMessage = index < messages.length - 1 ? messages[index + 1] : null; + // 每条消息都显示头像 + const showName = !prevMessage || prevMessage.sender_id !== message.sender_id; + const isSequential = prevMessage && prevMessage.sender_id === message.sender_id; + + return ( +
+
+ {/* 头像 - 每条消息都显示 */} +
+
+ {getDisplayName(message.sender_id)} { + // 头像加载失败时显示文字头像 + const target = e.target as HTMLImageElement; + target.style.display = 'none'; + target.nextElementSibling?.classList.remove('hidden'); + }} + /> +
+ {getDisplayName(message.sender_id).charAt(0).toUpperCase()} +
+ {/* 在线状态指示器 */} +
+
+
+ + {/* 消息内容 */} +
+ {/* 发送者名称（仅在非连续消息时显示） */} + {!isOwnMessage && showName && ( +
+ + {getDisplayName(message.sender_id)} + +
+ )} + + {/* 消息气泡 */} +
+ {message.message_type === 'image' ? ( +
+ 图片消息 { + // 点击图片放大查看 + const img = new Image(); + img.src = message.content; + const newWindow = window.open(''); + if (newWindow) { + newWindow.document.write(` + + + 图片查看 + + + + + + + `); + } + }} + /> + {/* 图片遮罩 */} +
+
+ ) : ( +
+ {message.content} +
+ )} + + {/* 消息气泡装饰尾巴 */} +
+
+ + {/* 时间戳显示在消息气泡下方 */} +
+ + {formatMessageTime(message.timestamp)} + +
+
+
+
+ ); + })} +
+ + {/* 消息列表底部装饰 */} +
+
+ + {/* 消息输入区域 */} +
+ {/* 表情选择器 */} + {showEmojiPicker && ( +
+
+

选择表情

+ +
+
+ {emojis.map((emoji, index) => ( + + ))} +
+
+ )} + + {/* 主输入区域 */} +
+
+ {/* 顶部工具栏 */} +
+ {/* 左侧功能按钮组 */} +
+ {/* 表情按钮 */} + + + {/* 图片上传按钮 */} + + + {/* 隐藏的文件输入 */} + + + {/* 附件按钮（预留） */} + +
+ + {/* 右侧状态指示 */} +
+ {/* 字符计数 */} + + {newMessage.length > 0 && ( + 500 ? 'text-red-500' : ''}> + {newMessage.length}/1000 + + )} + + {/* 连接状态 */} +
+
+ + {isConnected ? '在线' : '离线'} + +
+
+
+ + {/* 消息输入区域 */} +
+
+