豆瓣数据源增加备用源

2026-04-09 21:30:07 +08:00
parent 204eec782f
commit 769dbf8310
11 changed files with 778 additions and 202 deletions
@@ -7,7 +7,8 @@ import { useCallback, useEffect, useRef,useState } from 'react';

 import { type TMDBItem,getGenreNames, getTMDBImageUrl } from '@/lib/tmdb.client';
 import { getDoubanDetail } from '@/lib/douban.client';
-import { processImageUrl } from '@/lib/utils';
+
+import ProxyImage from '@/components/ProxyImage';

 interface BannerCarouselProps {
  autoPlayInterval?: number; // 自动播放间隔（毫秒）
@@ -67,15 +68,15 @@ export default function BannerCarousel({ autoPlayInterval = 5000, delayLoad = fa
    }
  };

-  // 获取图片URL（处理TX完整URL和TMDB路径）
+  // 获取图片原始URL（处理TX完整URL和TMDB路径）
  const getImageUrl = (path: string | null) => {
    if (!path) return '';
-    // 如果是完整URL（TX数据源或豆瓣），使用processImageUrl统一处理
+    // 如果是完整URL（TX数据源或豆瓣），直接返回原始地址
    if (path.startsWith('http://') || path.startsWith('https://')) {
-      return processImageUrl(path);
+      return path;
    }
-    // 否则使用TMDB的URL拼接，并通过processImageUrl处理
-    return processImageUrl(getTMDBImageUrl(path, 'original'));
+    // 否则使用TMDB的URL拼接原始地址
+    return getTMDBImageUrl(path, 'original');
  };

  // 获取视频URL（处理豆瓣视频代理）
@@ -454,13 +455,11 @@ export default function BannerCarousel({ autoPlayInterval = 5000, delayLoad = fa
              </div>
            ) : (
              /* 显示图片 */
-              <Image
-                src={getImageUrl(item.backdrop_path || item.poster_path)}
+              <ProxyImage
+                originalSrc={getImageUrl(item.backdrop_path || item.poster_path)}
                alt={item.title}
-                fill
-                className="object-cover"
-                priority={index === 0}
-                sizes="100vw"
+                className="absolute inset-0 w-full h-full object-cover"
+                loading={index === 0 ? 'eager' : 'lazy'}
              />
            )}
            {/* 渐变遮罩 */}
@@ -9,6 +9,7 @@ import { getTMDBImageUrl } from '@/lib/tmdb.client';
 import { processImageUrl } from '@/lib/utils';

 import ImageViewer from '@/components/ImageViewer';
+import ProxyImage from '@/components/ProxyImage';

 interface DetailPanelProps {
  isOpen: boolean;
@@ -373,7 +374,7 @@ const DetailPanel: React.FC<DetailPanelProps> = ({
              title: title,
              intro: cmsData.desc,
              episodesCount: cmsData.episodes?.length,
-              poster: poster ? processImageUrl(poster) : poster,
+              poster: poster,
            };
            setDetailData(data);
            setOriginalDetailData(data);
@@ -393,7 +394,7 @@ const DetailPanel: React.FC<DetailPanelProps> = ({
                  title: data.title || title,
                  intro: data.desc || '',
                  episodesCount: data.episodes?.length || cmsData.episodes?.length,
-                  poster: data.poster ? processImageUrl(data.poster) : poster,
+                  poster: data.poster || poster,
                  year: data.year,
                };
                setDetailData(detailData);
@@ -423,7 +424,7 @@ const DetailPanel: React.FC<DetailPanelProps> = ({
            title: data.name_cn || data.name,
            originalTitle: data.name,
            year: data.date ? data.date.substring(0, 4) : undefined,
-            poster: data.images?.large ? processImageUrl(data.images.large) : poster,
+            poster: data.images?.large || poster,
            rating: data.rating
              ? {
                  value: data.rating.score,
@@ -454,7 +455,7 @@ const DetailPanel: React.FC<DetailPanelProps> = ({
            title: data.title,
            originalTitle: data.original_title,
            year: data.year,
-            poster: (data.pic?.large || data.pic?.normal) ? processImageUrl(data.pic?.large || data.pic?.normal) : poster,
+            poster: data.pic?.large || data.pic?.normal || poster,
            rating: data.rating
              ? {
                  value: data.rating.value,
@@ -873,7 +874,7 @@ const DetailPanel: React.FC<DetailPanelProps> = ({
        ...prev,
        title: episodesData.name || season?.name || prev.title,
        intro: episodesData.overview || season?.overview || prev.overview,
-        poster: season?.poster_path ? processImageUrl(getTMDBImageUrl(season.poster_path, 'w500')) : prev.poster,
+        poster: season?.poster_path ? getTMDBImageUrl(season.poster_path, 'w500') : prev.poster,
        releaseDate: episodesData.air_date || season?.air_date || prev.releaseDate,
        year: episodesData.air_date?.substring(0, 4) || season?.air_date?.substring(0, 4) || prev.year,
        episodesCount: episodesData.episodes?.length || season?.episode_count || prev.episodesCount,
@@ -1090,11 +1091,13 @@ const DetailPanel: React.FC<DetailPanelProps> = ({
              style={{ height: virtualGalleryLayout.totalHeight, width: virtualGalleryLayout.usedWidth || '100%' }}
            >
              {virtualGalleryLayout.visibleItems.map((image) => {
-                const imageUrl = processImageUrl(
-                  getTMDBImageUrl(image.file_path, image.imageType === 'poster' ? 'w500' : 'original')
+                const imageUrl = getTMDBImageUrl(
+                  image.file_path,
+                  image.imageType === 'poster' ? 'w500' : 'original'
                );
-                const thumbUrl = processImageUrl(
-                  getTMDBImageUrl(image.file_path, image.imageType === 'poster' ? 'w342' : 'w780')
+                const thumbUrl = getTMDBImageUrl(
+                  image.file_path,
+                  image.imageType === 'poster' ? 'w342' : 'w780'
                );

                return (
@@ -1112,12 +1115,10 @@ const DetailPanel: React.FC<DetailPanelProps> = ({
                      className="relative w-full h-full overflow-hidden rounded-md bg-gray-100 dark:bg-gray-800 cursor-pointer hover:opacity-90 transition-opacity"
                      onClick={() => handleImageClick(imageUrl)}
                    >
-                      <Image
-                        src={thumbUrl}
+                      <ProxyImage
+                        originalSrc={thumbUrl}
                        alt={`${detailData?.title || title}-gallery-${image.index + 1}`}
-                        fill
-                        sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, (max-width: 1280px) 25vw, 20vw"
-                        className="object-cover"
+                        className="absolute inset-0 w-full h-full object-cover"
                        draggable={false}
                      />
                      <div className="absolute left-2 top-2 px-2 py-0.5 rounded-full text-xs bg-black/60 text-white">
@@ -1231,7 +1232,12 @@ const DetailPanel: React.FC<DetailPanelProps> = ({
                      className="relative w-32 h-48 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-800 cursor-pointer hover:opacity-90 transition-opacity"
                      onClick={() => handleImageClick(detailData.poster!)}
                    >
-                      <Image src={detailData.poster} alt={detailData.title} fill className="object-cover" draggable={false} />
+                      <ProxyImage
+                        originalSrc={detailData.poster}
+                        alt={detailData.title}
+                        className="absolute inset-0 w-full h-full object-cover"
+                        draggable={false}
+                      />
                    </div>
                    {galleryEntryButton}
                  </div>
@@ -1356,13 +1362,12 @@ const DetailPanel: React.FC<DetailPanelProps> = ({
                            {actor.profile_path ? (
                              <div
                                className="relative w-20 h-20 rounded-full overflow-hidden bg-gray-200 dark:bg-gray-700 mb-2 cursor-pointer hover:opacity-80 transition-opacity"
-                                onClick={() => handleImageClick(processImageUrl(getTMDBImageUrl(actor.profile_path || null, 'w185')))}
+                                onClick={() => handleImageClick(getTMDBImageUrl(actor.profile_path || null, 'w185'))}
                              >
-                                <Image
-                                  src={processImageUrl(getTMDBImageUrl(actor.profile_path || null, 'w185'))}
+                                <ProxyImage
+                                  originalSrc={getTMDBImageUrl(actor.profile_path || null, 'w185')}
                                  alt={actor.name}
-                                  fill
-                                  className="object-cover"
+                                  className="absolute inset-0 w-full h-full object-cover"
                                  draggable={false}
                                />
                              </div>
@@ -1474,14 +1479,13 @@ const DetailPanel: React.FC<DetailPanelProps> = ({
                                    className="relative w-12 h-16 rounded overflow-hidden bg-gray-200 dark:bg-gray-700 flex-shrink-0 hover:opacity-80 transition-opacity"
                                    onClick={(e) => {
                                      e.stopPropagation();
-                                      handleImageClick(processImageUrl(getTMDBImageUrl(season.poster_path, 'w500')));
+                                      handleImageClick(getTMDBImageUrl(season.poster_path, 'w500'));
                                    }}
                                  >
-                                    <Image
-                                      src={processImageUrl(getTMDBImageUrl(season.poster_path, 'w92'))}
+                                    <ProxyImage
+                                      originalSrc={getTMDBImageUrl(season.poster_path, 'w92')}
                                      alt={season.name}
-                                      fill
-                                      className="object-cover"
+                                      className="absolute inset-0 w-full h-full object-cover"
                                      draggable={false}
                                    />
                                  </div>
@@ -1536,13 +1540,12 @@ const DetailPanel: React.FC<DetailPanelProps> = ({
                                    {episode.still_path && (
                                      <div
                                        className="relative w-full h-36 rounded overflow-hidden bg-gray-200 dark:bg-gray-700 mb-2 cursor-pointer hover:opacity-90 transition-opacity"
-                                        onClick={() => handleImageClick(processImageUrl(getTMDBImageUrl(episode.still_path, 'w500')))}
+                                        onClick={() => handleImageClick(getTMDBImageUrl(episode.still_path, 'w500'))}
                                      >
-                                        <Image
-                                          src={processImageUrl(getTMDBImageUrl(episode.still_path, 'w300'))}
+                                        <ProxyImage
+                                          originalSrc={getTMDBImageUrl(episode.still_path, 'w300')}
                                          alt={episode.name}
-                                          fill
-                                          className="object-cover"
+                                          className="absolute inset-0 w-full h-full object-cover"
                                          draggable={false}
                                        />
                                      </div>
@@ -1742,7 +1745,12 @@ const DetailPanel: React.FC<DetailPanelProps> = ({
                      className="relative w-32 h-48 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-800 cursor-pointer hover:opacity-90 transition-opacity"
                      onClick={() => handleImageClick(detailData.poster!)}
                    >
-                      <Image src={detailData.poster} alt={detailData.title} fill className="object-cover" draggable={false} />
+                      <ProxyImage
+                        originalSrc={detailData.poster}
+                        alt={detailData.title}
+                        className="absolute inset-0 w-full h-full object-cover"
+                        draggable={false}
+                      />
                    </div>
                    {galleryEntryButton}
                  </div>
@@ -1867,13 +1875,12 @@ const DetailPanel: React.FC<DetailPanelProps> = ({
                            {actor.profile_path ? (
                              <div
                                className="relative w-20 h-20 rounded-full overflow-hidden bg-gray-200 dark:bg-gray-700 mb-2 cursor-pointer hover:opacity-80 transition-opacity"
-                                onClick={() => handleImageClick(processImageUrl(getTMDBImageUrl(actor.profile_path || null, 'w185')))}
+                                onClick={() => handleImageClick(getTMDBImageUrl(actor.profile_path || null, 'w185'))}
                              >
-                                <Image
-                                  src={processImageUrl(getTMDBImageUrl(actor.profile_path || null, 'w185'))}
+                                <ProxyImage
+                                  originalSrc={getTMDBImageUrl(actor.profile_path || null, 'w185')}
                                  alt={actor.name}
-                                  fill
-                                  className="object-cover"
+                                  className="absolute inset-0 w-full h-full object-cover"
                                  draggable={false}
                                />
                              </div>
@@ -1985,14 +1992,13 @@ const DetailPanel: React.FC<DetailPanelProps> = ({
                                    className="relative w-12 h-16 rounded overflow-hidden bg-gray-200 dark:bg-gray-700 flex-shrink-0 hover:opacity-80 transition-opacity"
                                    onClick={(e) => {
                                      e.stopPropagation();
-                                      handleImageClick(processImageUrl(getTMDBImageUrl(season.poster_path, 'w500')));
+                                      handleImageClick(getTMDBImageUrl(season.poster_path, 'w500'));
                                    }}
                                  >
-                                    <Image
-                                      src={processImageUrl(getTMDBImageUrl(season.poster_path, 'w92'))}
+                                    <ProxyImage
+                                      originalSrc={getTMDBImageUrl(season.poster_path, 'w92')}
                                      alt={season.name}
-                                      fill
-                                      className="object-cover"
+                                      className="absolute inset-0 w-full h-full object-cover"
                                      draggable={false}
                                    />
                                  </div>
@@ -2047,13 +2053,12 @@ const DetailPanel: React.FC<DetailPanelProps> = ({
                                    {episode.still_path && (
                                      <div
                                        className="relative w-full h-36 rounded overflow-hidden bg-gray-200 dark:bg-gray-700 mb-2 cursor-pointer hover:opacity-90 transition-opacity"
-                                        onClick={() => handleImageClick(processImageUrl(getTMDBImageUrl(episode.still_path, 'w500')))}
+                                        onClick={() => handleImageClick(getTMDBImageUrl(episode.still_path, 'w500'))}
                                      >
-                                        <Image
-                                          src={processImageUrl(getTMDBImageUrl(episode.still_path, 'w300'))}
+                                        <ProxyImage
+                                          originalSrc={getTMDBImageUrl(episode.still_path, 'w300')}
                                          alt={episode.name}
-                                          fill
-                                          className="object-cover"
+                                          className="absolute inset-0 w-full h-full object-cover"
                                          draggable={false}
                                        />
                                      </div>
@@ -12,10 +12,11 @@ import React, {

 import type { DanmakuComment,DanmakuSelection } from '@/lib/danmaku/types';
 import { EpisodeFilterConfig,SearchResult } from '@/lib/types';
-import { getVideoResolutionFromM3u8, processImageUrl } from '@/lib/utils';
+import { getVideoResolutionFromM3u8 } from '@/lib/utils';

 import DanmakuPanel from '@/components/DanmakuPanel';
 import EpisodeFilterSettings from '@/components/EpisodeFilterSettings';
+import ProxyImage from '@/components/ProxyImage';

 // 定义视频信息类型
 interface VideoInfo {
@@ -870,10 +871,11 @@ const EpisodeSelector: React.FC<EpisodeSelectorProps> = ({
                          {source.source === 'directplay' ? (
                            <LinkIcon className='w-6 h-6 text-blue-500' />
                          ) : source.poster ? (
-                            <img
-                              src={processImageUrl(source.poster)}
+                            <ProxyImage
+                              originalSrc={source.poster}
                              alt={source.title}
                              className='w-full h-full object-cover'
+                              retryOnError={false}
                              onError={(e) => {
                                const target = e.target as HTMLImageElement;
                                target.style.display = 'none';
@@ -1,10 +1,11 @@
 'use client';

 import { X } from 'lucide-react';
-import Image from 'next/image';
 import React, { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';

+import ProxyImage from '@/components/ProxyImage';
+
 interface ImageViewerProps {
  isOpen: boolean;
  onClose: () => void;
@@ -151,18 +152,15 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
        onClick={(e) => e.stopPropagation()}
      >
        <div className="relative w-full h-full">
-          <Image
-            src={imageUrl}
+          <ProxyImage
+            originalSrc={imageUrl}
            alt={alt}
-            width={1200}
-            height={1800}
            className="object-contain max-w-[100vw] max-h-[100vh] sm:max-w-[90vw] sm:max-h-[90vh] w-auto h-auto"
            style={{
              maxWidth: '100vw',
              maxHeight: '100vh',
            }}
-            priority
-            quality={100}
+            loading="eager"
          />
        </div>
      </div>
@@ -0,0 +1,49 @@
+'use client';
+
+import React from 'react';
+
+import { processImageUrl, tryApplyDoubanImageFallback } from '@/lib/utils';
+
+interface ProxyImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  originalSrc: string;
+  displaySrc?: string;
+  retryDelay?: number;
+  retryOnError?: boolean;
+}
+
+const ProxyImage: React.FC<ProxyImageProps> = ({
+  originalSrc,
+  displaySrc,
+  retryDelay = 2000,
+  retryOnError = true,
+  onError,
+  src: _src,
+  ...props
+}) => {
+  const handleError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
+    const img = e.currentTarget;
+
+    if (tryApplyDoubanImageFallback(img, originalSrc)) {
+      return;
+    }
+
+    if (retryOnError && !img.dataset.retried) {
+      img.dataset.retried = 'true';
+      window.setTimeout(() => {
+        img.src = displaySrc || processImageUrl(originalSrc);
+      }, retryDelay);
+    }
+
+    onError?.(e);
+  };
+
+  return (
+    <img
+      {...props}
+      src={displaySrc || processImageUrl(originalSrc)}
+      onError={handleError}
+    />
+  );
+};
+
+export default ProxyImage;
@@ -118,11 +118,18 @@ export const UserMenu: React.FC = () => {
  const [tmdbBackdropDisabled, setTmdbBackdropDisabled] = useState(false);
  const [enableTrailers, setEnableTrailers] = useState(false);
  const [doubanDataSource, setDoubanDataSource] = useState('cmliussss-cdn-tencent');
+  const [doubanDataSourceBackup, setDoubanDataSourceBackup] = useState('direct');
  const [doubanImageProxyType, setDoubanImageProxyType] = useState('cmliussss-cdn-tencent');
+  const [doubanImageProxyTypeBackup, setDoubanImageProxyTypeBackup] = useState('server');
  const [doubanImageProxyUrl, setDoubanImageProxyUrl] = useState('');
+  const [doubanProxyUrlBackup, setDoubanProxyUrlBackup] = useState('');
+  const [doubanImageProxyUrlBackup, setDoubanImageProxyUrlBackup] = useState('');
  const [isDoubanDropdownOpen, setIsDoubanDropdownOpen] = useState(false);
+  const [isDoubanBackupDropdownOpen, setIsDoubanBackupDropdownOpen] = useState(false);
  const [isDoubanImageProxyDropdownOpen, setIsDoubanImageProxyDropdownOpen] =
    useState(false);
+  const [isDoubanImageProxyBackupDropdownOpen, setIsDoubanImageProxyBackupDropdownOpen] =
+    useState(false);
  const [bufferStrategy, setBufferStrategy] = useState('medium');
  const [nextEpisodePreCache, setNextEpisodePreCache] = useState(true);
  const [nextEpisodeDanmakuPreload, setNextEpisodeDanmakuPreload] = useState(true);
@@ -440,6 +447,16 @@ export const UserMenu: React.FC = () => {
        setDoubanProxyUrl(defaultDoubanProxy);
      }

+      const savedDoubanDataSourceBackup = localStorage.getItem(
+        'doubanDataSourceBackup'
+      );
+      setDoubanDataSourceBackup(savedDoubanDataSourceBackup || 'direct');
+
+      const savedDoubanProxyUrlBackup = localStorage.getItem(
+        'doubanProxyUrlBackup'
+      );
+      setDoubanProxyUrlBackup(savedDoubanProxyUrlBackup || '');
+
      const savedDoubanImageProxyType = localStorage.getItem(
        'doubanImageProxyType'
      );
@@ -462,6 +479,16 @@ export const UserMenu: React.FC = () => {
        setDoubanImageProxyUrl(defaultDoubanImageProxyUrl);
      }

+      const savedDoubanImageProxyTypeBackup = localStorage.getItem(
+        'doubanImageProxyTypeBackup'
+      );
+      setDoubanImageProxyTypeBackup(savedDoubanImageProxyTypeBackup || 'server');
+
+      const savedDoubanImageProxyUrlBackup = localStorage.getItem(
+        'doubanImageProxyUrlBackup'
+      );
+      setDoubanImageProxyUrlBackup(savedDoubanImageProxyUrlBackup || '');
+
      const savedTmdbImageBaseUrl = localStorage.getItem('tmdbImageBaseUrl');
      if (savedTmdbImageBaseUrl !== null) {
        setTmdbImageBaseUrl(savedTmdbImageBaseUrl);
@@ -754,6 +781,23 @@ export const UserMenu: React.FC = () => {
    }
  }, [isDoubanDropdownOpen]);

+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (isDoubanBackupDropdownOpen) {
+        const target = event.target as Element;
+        if (!target.closest('[data-dropdown="douban-datasource-backup"]')) {
+          setIsDoubanBackupDropdownOpen(false);
+        }
+      }
+    };
+
+    if (isDoubanBackupDropdownOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () =>
+        document.removeEventListener('mousedown', handleClickOutside);
+    }
+  }, [isDoubanBackupDropdownOpen]);
+
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (isDoubanImageProxyDropdownOpen) {
@@ -771,6 +815,23 @@ export const UserMenu: React.FC = () => {
    }
  }, [isDoubanImageProxyDropdownOpen]);

+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (isDoubanImageProxyBackupDropdownOpen) {
+        const target = event.target as Element;
+        if (!target.closest('[data-dropdown="douban-image-proxy-backup"]')) {
+          setIsDoubanImageProxyBackupDropdownOpen(false);
+        }
+      }
+    };
+
+    if (isDoubanImageProxyBackupDropdownOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () =>
+        document.removeEventListener('mousedown', handleClickOutside);
+    }
+  }, [isDoubanImageProxyBackupDropdownOpen]);
+
  const handleMenuClick = () => {
    setIsOpen(!isOpen);
  };
@@ -1049,6 +1110,13 @@ export const UserMenu: React.FC = () => {
    }
  };

+  const handleDoubanDataSourceBackupChange = (value: string) => {
+    setDoubanDataSourceBackup(value);
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('doubanDataSourceBackup', value);
+    }
+  };
+
  const handleDoubanImageProxyTypeChange = (value: string) => {
    setDoubanImageProxyType(value);
    if (typeof window !== 'undefined') {
@@ -1056,6 +1124,20 @@ export const UserMenu: React.FC = () => {
    }
  };

+  const handleDoubanImageProxyTypeBackupChange = (value: string) => {
+    setDoubanImageProxyTypeBackup(value);
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('doubanImageProxyTypeBackup', value);
+    }
+  };
+
+  const handleDoubanProxyUrlBackupChange = (value: string) => {
+    setDoubanProxyUrlBackup(value);
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('doubanProxyUrlBackup', value);
+    }
+  };
+
  const handleDoubanImageProxyUrlChange = (value: string) => {
    setDoubanImageProxyUrl(value);
    if (typeof window !== 'undefined') {
@@ -1063,6 +1145,13 @@ export const UserMenu: React.FC = () => {
    }
  };

+  const handleDoubanImageProxyUrlBackupChange = (value: string) => {
+    setDoubanImageProxyUrlBackup(value);
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('doubanImageProxyUrlBackup', value);
+    }
+  };
+
  const handleTmdbImageBaseUrlChange = (value: string) => {
    setTmdbImageBaseUrl(value);
    if (typeof window !== 'undefined') {
@@ -1240,8 +1329,12 @@ export const UserMenu: React.FC = () => {
    setEnableTrailers(false);
    setDoubanProxyUrl(defaultDoubanProxy);
    setDoubanDataSource(defaultDoubanProxyType);
+    setDoubanDataSourceBackup('direct');
+    setDoubanProxyUrlBackup('');
    setDoubanImageProxyType(defaultDoubanImageProxyType);
    setDoubanImageProxyUrl(defaultDoubanImageProxyUrl);
+    setDoubanImageProxyTypeBackup('server');
+    setDoubanImageProxyUrlBackup('');
    setTmdbImageBaseUrl('https://image.tmdb.org');
    setBufferStrategy('medium');
    setNextEpisodePreCache(true);
@@ -1261,8 +1354,12 @@ export const UserMenu: React.FC = () => {
      localStorage.setItem('enableTrailers', 'false');
      localStorage.setItem('doubanProxyUrl', defaultDoubanProxy);
      localStorage.setItem('doubanDataSource', defaultDoubanProxyType);
+      localStorage.setItem('doubanDataSourceBackup', 'direct');
+      localStorage.setItem('doubanProxyUrlBackup', '');
      localStorage.setItem('doubanImageProxyType', defaultDoubanImageProxyType);
      localStorage.setItem('doubanImageProxyUrl', defaultDoubanImageProxyUrl);
+      localStorage.setItem('doubanImageProxyTypeBackup', 'server');
+      localStorage.setItem('doubanImageProxyUrlBackup', '');
      localStorage.setItem('tmdbImageBaseUrl', 'https://image.tmdb.org');
      localStorage.setItem('bufferStrategy', 'medium');
      localStorage.setItem('nextEpisodePreCache', 'true');
@@ -1723,6 +1820,96 @@ export const UserMenu: React.FC = () => {
                        value={doubanProxyUrl}
                        onChange={(e) => handleDoubanProxyUrlChange(e.target.value)}
                      />
+                      {!doubanProxyUrl.trim() && (
+                        <p className='text-xs text-amber-600 dark:text-amber-400 mt-1'>
+                          未填写地址时将自动按直连处理
+                        </p>
+                      )}
+                    </div>
+                  )}
+
+                  <div className='space-y-3'>
+                    <div>
+                      <h4 className='text-sm font-medium text-gray-700 dark:text-gray-300'>
+                        豆瓣数据备用渠道
+                      </h4>
+                      <p className='text-xs text-gray-500 dark:text-gray-400 mt-1'>
+                        主渠道失败后自动切换，默认直连
+                      </p>
+                    </div>
+                    <div
+                      className='relative'
+                      data-dropdown='douban-datasource-backup'
+                    >
+                      <button
+                        type='button'
+                        onClick={() =>
+                          setIsDoubanBackupDropdownOpen(!isDoubanBackupDropdownOpen)
+                        }
+                        className='w-full px-3 py-2.5 pr-10 border border-gray-300 dark:border-gray-600 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all duration-200 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm hover:border-gray-400 dark:hover:border-gray-500 text-left'
+                      >
+                        {
+                          doubanDataSourceOptions.find(
+                            (option) => option.value === doubanDataSourceBackup
+                          )?.label
+                        }
+                      </button>
+                      <div className='absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none'>
+                        <ChevronDown
+                          className={`w-4 h-4 text-gray-400 dark:text-gray-500 transition-transform duration-200 ${isDoubanBackupDropdownOpen ? 'rotate-180' : ''
+                            }`}
+                        />
+                      </div>
+                      {isDoubanBackupDropdownOpen && (
+                        <div className='absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-auto'>
+                          {doubanDataSourceOptions.map((option) => (
+                            <button
+                              key={option.value}
+                              type='button'
+                              onClick={() => {
+                                handleDoubanDataSourceBackupChange(option.value);
+                                setIsDoubanBackupDropdownOpen(false);
+                              }}
+                              className={`w-full px-3 py-2.5 text-left text-sm transition-colors duration-150 flex items-center justify-between hover:bg-gray-100 dark:hover:bg-gray-700 ${doubanDataSourceBackup === option.value
+                                ? 'bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400'
+                                : 'text-gray-900 dark:text-gray-100'
+                                }`}
+                            >
+                              <span className='truncate'>{option.label}</span>
+                              {doubanDataSourceBackup === option.value && (
+                                <Check className='w-4 h-4 text-green-600 dark:text-green-400 flex-shrink-0 ml-2' />
+                              )}
+                            </button>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+
+                  {doubanDataSourceBackup === 'custom' && (
+                    <div className='space-y-3'>
+                      <div>
+                        <h4 className='text-sm font-medium text-gray-700 dark:text-gray-300'>
+                          豆瓣备用代理地址
+                        </h4>
+                        <p className='text-xs text-gray-500 dark:text-gray-400 mt-1'>
+                          备用渠道为自定义代理时生效
+                        </p>
+                      </div>
+                      <input
+                        type='text'
+                        className='w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all duration-200 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 shadow-sm hover:border-gray-400 dark:hover:border-gray-500'
+                        placeholder='例如: https://proxy.example.com/fetch?url='
+                        value={doubanProxyUrlBackup}
+                        onChange={(e) =>
+                          handleDoubanProxyUrlBackupChange(e.target.value)
+                        }
+                      />
+                      {!doubanProxyUrlBackup.trim() && (
+                        <p className='text-xs text-amber-600 dark:text-amber-400 mt-1'>
+                          未填写地址时备用渠道将自动按直连处理
+                        </p>
+                      )}
                    </div>
                  )}

@@ -1833,6 +2020,98 @@ export const UserMenu: React.FC = () => {
                          handleDoubanImageProxyUrlChange(e.target.value)
                        }
                      />
+                      {!doubanImageProxyUrl.trim() && (
+                        <p className='text-xs text-amber-600 dark:text-amber-400 mt-1'>
+                          未填写地址时将自动按服务器代理处理
+                        </p>
+                      )}
+                    </div>
+                  )}
+
+                  <div className='space-y-3'>
+                    <div>
+                      <h4 className='text-sm font-medium text-gray-700 dark:text-gray-300'>
+                        豆瓣图片备用渠道
+                      </h4>
+                      <p className='text-xs text-gray-500 dark:text-gray-400 mt-1'>
+                        主图片渠道失败后自动切换，默认服务器代理
+                      </p>
+                    </div>
+                    <div
+                      className='relative'
+                      data-dropdown='douban-image-proxy-backup'
+                    >
+                      <button
+                        type='button'
+                        onClick={() =>
+                          setIsDoubanImageProxyBackupDropdownOpen(
+                            !isDoubanImageProxyBackupDropdownOpen
+                          )
+                        }
+                        className='w-full px-3 py-2.5 pr-10 border border-gray-300 dark:border-gray-600 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all duration-200 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm hover:border-gray-400 dark:hover:border-gray-500 text-left'
+                      >
+                        {
+                          doubanImageProxyTypeOptions.find(
+                            (option) => option.value === doubanImageProxyTypeBackup
+                          )?.label
+                        }
+                      </button>
+                      <div className='absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none'>
+                        <ChevronDown
+                          className={`w-4 h-4 text-gray-400 dark:text-gray-500 transition-transform duration-200 ${isDoubanImageProxyBackupDropdownOpen ? 'rotate-180' : ''
+                            }`}
+                        />
+                      </div>
+                      {isDoubanImageProxyBackupDropdownOpen && (
+                        <div className='absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-auto'>
+                          {doubanImageProxyTypeOptions.map((option) => (
+                            <button
+                              key={option.value}
+                              type='button'
+                              onClick={() => {
+                                handleDoubanImageProxyTypeBackupChange(option.value);
+                                setIsDoubanImageProxyBackupDropdownOpen(false);
+                              }}
+                              className={`w-full px-3 py-2.5 text-left text-sm transition-colors duration-150 flex items-center justify-between hover:bg-gray-100 dark:hover:bg-gray-700 ${doubanImageProxyTypeBackup === option.value
+                                ? 'bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400'
+                                : 'text-gray-900 dark:text-gray-100'
+                                }`}
+                            >
+                              <span className='truncate'>{option.label}</span>
+                              {doubanImageProxyTypeBackup === option.value && (
+                                <Check className='w-4 h-4 text-green-600 dark:text-green-400 flex-shrink-0 ml-2' />
+                              )}
+                            </button>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+
+                  {doubanImageProxyTypeBackup === 'custom' && (
+                    <div className='space-y-3'>
+                      <div>
+                        <h4 className='text-sm font-medium text-gray-700 dark:text-gray-300'>
+                          豆瓣图片备用代理地址
+                        </h4>
+                        <p className='text-xs text-gray-500 dark:text-gray-400 mt-1'>
+                          备用图片渠道为自定义代理时生效
+                        </p>
+                      </div>
+                      <input
+                        type='text'
+                        className='w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all duration-200 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 shadow-sm hover:border-gray-400 dark:hover:border-gray-500'
+                        placeholder='例如: https://proxy.example.com/fetch?url='
+                        value={doubanImageProxyUrlBackup}
+                        onChange={(e) =>
+                          handleDoubanImageProxyUrlBackupChange(e.target.value)
+                        }
+                      />
+                      {!doubanImageProxyUrlBackup.trim() && (
+                        <p className='text-xs text-amber-600 dark:text-amber-400 mt-1'>
+                          未填写地址时备用图片渠道将自动按服务器代理处理
+                        </p>
+                      )}
                    </div>
                  )}

@@ -21,7 +21,7 @@ import {
  saveFavorite,
  subscribeToDataUpdates,
 } from '@/lib/db.client';
-import { processImageUrl, base58Decode } from '@/lib/utils';
+import { processImageUrl, base58Decode, tryApplyDoubanImageFallback } from '@/lib/utils';
 import { useLongPress } from '@/hooks/useLongPress';

 import AIChatPanel from '@/components/AIChatPanel';
@@ -750,8 +750,12 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
                setShowImageViewer(true);
              }}
              onError={(e) => {
+                const img = e.currentTarget as HTMLImageElement;
+                if (tryApplyDoubanImageFallback(img, actualPoster)) {
+                  return;
+                }
+
                // 图片加载失败时的重试机制
-                const img = e.target as HTMLImageElement;
                if (!img.dataset.retried) {
                  img.dataset.retried = 'true';
                  setTimeout(() => {
@@ -1598,7 +1602,7 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
        <ImageViewer
          isOpen={showImageViewer}
          onClose={() => setShowImageViewer(false)}
-          imageUrl={processImageUrl(actualPoster)}
+          imageUrl={actualPoster}
          alt={actualTitle}
        />
      )}