1
import type { CoverImageConfig } from "../types/config";
2

3
/**
4
 * 文章随机封面图配置
5
 *
6
 * 使用说明：
7
 * 1. 在文章的 Frontmatter 中添加 image: "api" 即可使用随机图功能
8
 * 2. 系统会依次尝试所有配置的 API，全部失败后使用备用图片
9
 * 3. 如果 enable 为 false，则直接不显示封面图（也不会显示备用图）
10
 *
11
 * // 文章 Frontmatter 示例：
12
 * ---
13
 * title: 文章标题
14
 * image: "api"
15
 * ---
16
 */
17
export const coverImageConfig: CoverImageConfig = {
18
  // 随机封面图功能开关
19
  enable: true,
20
  // 封面图API列表
21
  apis: [
22
    "https://t.alcy.cc/pc",
23
    "https://www.dmoe.cc/random.php",
24
    "https://uapis.cn/api/v1/random/image?category=acg&type=pc",
25
  ],
26
  // 备用图片路径
27
  fallback: "/assets/images/cover.webp",
28

29
  /**
30
   * 加载指示器配置
31
   * - 自定义加载图片和背景色，用于在图片加载过程中显示
32
   * - 如果不配置，将使用默认的 loading.gif 和 #fefefe 背景色
33
   */
34
  loading: {
35
    // 自定义加载图片路径（相对于 public 目录）
36
    image: "/assets/images/loading.gif",
37
    // 加载指示器背景颜色，应与加载图片的背景色一致，避免在暗色模式下显得突兀
38
    backgroundColor: "#fefefe",
39
  },
40

41
  /**
42
   * 水印配置
43
   * - 仅在随机图API成功加载时显示水印
44
   * - 当使用备用图片时，水印文字会自动更新为 "Image API Error"
45
   * - 移动端会自动调整位置（bottom位置会显示在top，避免被裁剪）
46
   */
47
  watermark: {
48
    // 水印开关
49
    enable: true,
50
    // 水印文本
51
    text: "鹏星",
52
    /**
53
     * 水印位置
54
     * - "top-left": 左上角
55
     * - "top-right": 右上角
56
     * - "bottom-left": 左下角（移动端显示在左上角，桌面端显示在左下角）
57
     * - "bottom-right": 右下角（移动端显示在右上角，桌面端显示在右下角）
58
     * - "center": 居中
59
     */
60
    position: "bottom-right",
61
    // 水印透明度
62
    opacity: 0.6,
63
    // 字体大小
64
    fontSize: "0.75rem",
65
    // 字体颜色
66
    color: "#ffffff",
67
    // 背景颜色
68
    backgroundColor: "rgba(0, 0, 0, 0.5)",
69
  },
70
};

1
// 。。。。省略
2

3
export type CoverImageConfig = {
4
  enable: boolean; // 是否启用随机图功能
5
  apis: string[]; // 随机图API列表，支持 {seed} 占位符，会替换为文章slug或时间戳
6
  fallback?: string; // 当API请求失败时的备用图片路径
7
  // 加载指示器配置
8
  loading?: {
9
    image?: string; // 自定义加载图片路径（相对于public目录），默认 "/assets/images/loading.gif"
10
    backgroundColor?: string; // 加载指示器背景颜色，默认与loading.gif背景色一致 (#fefefe)
11
  };
12
  watermark?: {
13
    enable: boolean; // 是否显示水印
14
    text?: string; // 水印文本，默认为"随机图"
15
    position?:
16
      | "top-left"
17
      | "top-right"
18
      | "bottom-left"
19
      | "bottom-right"
20
      | "center"; // 水印位置
21
    opacity?: number; // 水印透明度 0-1，默认0.6
22
    fontSize?: string; // 字体大小，默认"0.75rem"
23
    color?: string; // 文字颜色，默认为白色
24
    backgroundColor?: string; // 背景颜色，默认为半透明黑色
25
  };
26
};

1
import { coverImageConfig } from "@/config/coverImageConfig";
2

3
/**
4
 * 处理文章封面图
5
 * 当image字段为"api"时，从配置的随机图API获取图片
6
 * @param image - 文章frontmatter中的image字段值
7
 * @param seed - 用于生成随机图的种子（通常使用文章slug或id）
8
 * @returns 处理后的图片URL
9
 */
10
export async function processCoverImage(
11
  image: string | undefined,
12
  seed?: string,
13
): Promise<string> {
14
  // 如果image不存在或为空，直接返回
15
  if (!image || image === "") {
16
    return "";
17
  }
18

19
  // 如果image不是"api"，直接返回原始值
20
  if (image !== "api") {
21
    return image;
22
  }
23

24
  // 如果未启用随机图功能，直接返回空字符串（不显示封面，也不显示备用图）
25
  if (
26
    !coverImageConfig.enable ||
27
    !coverImageConfig.apis ||
28
    coverImageConfig.apis.length === 0
29
  ) {
30
    return "";
31
  }
32

33
  try {
34
    // 随机选择一个API
35
    const randomApi =
36
      coverImageConfig.apis[
37
        Math.floor(Math.random() * coverImageConfig.apis.length)
38
      ];
39

40
    // 生成seed值：使用文章slug或时间戳
41
    const seedValue = seed || Date.now().toString();
42

43
    // 如果API中包含{seed}占位符，替换它
44
    let apiUrl = randomApi.replace(/{seed}/g, seedValue);
45

46
    // 如果API中没有{seed}占位符，需要添加随机参数确保每篇文章获取不同图片
47
    if (!randomApi.includes("{seed}")) {
48
      // 将seed转换为数字hash（确保每个不同的slug产生不同的hash）
49
      const hash = seedValue.split("").reduce((acc, char) => {
50
        return ((acc << 5) - acc + char.charCodeAt(0)) | 0;
51
      }, 0);
52

53
      // 添加查询参数来确保每篇文章获取不同的图片
54
      const separator = apiUrl.includes("?") ? "&" : "?";
55
      // 使用hash确保每篇文章有不同的URL（稳定且唯一，基于文章slug）
56
      // 注意：如果API不支持查询参数来获取不同图片，可能需要配置支持seed占位符的API
57
      apiUrl = `${apiUrl}${separator}v=${Math.abs(hash)}`;
58
    }
59

60
    // 在构建时直接返回API URL（客户端会请求）
61
    // 注意：如果API返回的是JSON格式，需要特殊处理
62
    return apiUrl;
63
  } catch (error) {
64
    console.warn("Failed to process random image API:", error);
65
    // 即使出错，如果enable为false也不返回fallback，直接返回空字符串
66
    if (!coverImageConfig.enable) {
67
      return "";
68
    }
69
    return coverImageConfig.fallback || "";
70
  }
71
}
72

73
/**
74
 * 同步版本（用于不需要异步的场景）
75
 * 当image字段为"api"时，返回第一个API URL，客户端会依次尝试所有API
76
 */
77
export function processCoverImageSync(
78
  image: string | undefined,
79
  seed?: string,
80
): string {
81
  // 如果image不存在或为空，直接返回
82
  if (!image || image === "") {
83
    return "";
84
  }
85

86
  // 如果image不是"api"，直接返回原始值
87
  if (image !== "api") {
88
    return image;
89
  }
90

91
  // 如果未启用随机图功能，直接返回空字符串（不显示封面，也不显示备用图）
92
  if (
93
    !coverImageConfig.enable ||
94
    !coverImageConfig.apis ||
95
    coverImageConfig.apis.length === 0
96
  ) {
97
    return "";
98
  }
99

100
  try {
101
    // 返回第一个API，客户端脚本会依次尝试所有API
102
    const firstApi = coverImageConfig.apis[0];
103

104
    // 生成seed值：使用文章slug或时间戳
105
    const seedValue = seed || Date.now().toString();
106

107
    // 如果API中包含{seed}占位符，替换它
108
    let apiUrl = firstApi.replace(/{seed}/g, seedValue);
109

110
    // 如果API中没有{seed}占位符，需要添加随机参数确保每篇文章获取不同图片
111
    if (!firstApi.includes("{seed}")) {
112
      // 将seed转换为数字hash（确保每个不同的slug产生不同的hash）
113
      const hash = seedValue.split("").reduce((acc, char) => {
114
        return ((acc << 5) - acc + char.charCodeAt(0)) | 0;
115
      }, 0);
116

117
      // 添加查询参数来确保每篇文章获取不同的图片
118
      const separator = apiUrl.includes("?") ? "&" : "?";
119
      // 使用hash确保每篇文章有不同的URL（稳定且唯一，基于文章slug）
120
      // 注意：如果API不支持查询参数来获取不同图片，可能需要配置支持seed占位符的API
121
      apiUrl = `${apiUrl}${separator}v=${Math.abs(hash)}`;
122
    }
123

124
    return apiUrl;
125
  } catch (error) {
126
    console.warn("Failed to process random image API:", error);
127
    // 即使出错，如果enable为false也不返回fallback，直接返回空字符串
128
    if (!coverImageConfig.enable) {
129
      return "";
130
    }
131
    return coverImageConfig.fallback || "";
132
  }
133
}
134

135
/**
136
 * 生成所有API URL列表（用于客户端重试）
137
 */
138
export function generateApiUrls(seed?: string): string[] {
139
  if (
140
    !coverImageConfig.enable ||
141
    !coverImageConfig.apis ||
142
    coverImageConfig.apis.length === 0
143
  ) {
144
    return [];
145
  }
146

147
  const seedValue = seed || Date.now().toString();
148
  const hash = seedValue.split("").reduce((acc, char) => {
149
    return ((acc << 5) - acc + char.charCodeAt(0)) | 0;
150
  }, 0);
151

152
  return coverImageConfig.apis.map((api) => {
153
    let apiUrl = api.replace(/{seed}/g, seedValue);
154

155
    if (!api.includes("{seed}")) {
156
      const separator = apiUrl.includes("?") ? "&" : "?";
157
      apiUrl = `${apiUrl}${separator}v=${Math.abs(hash)}`;
158
    }
159

160
    return apiUrl;
161
  });
162
}

1
---
2
import { Image } from "astro:assets";
3
import * as path from "node:path";
4
import { coverImageConfig } from "@/config/coverImageConfig";
5
import { generateApiUrls } from "@/utils/image-utils";
6
import { url } from "@/utils/url-utils";
7

8
interface Props {
9
  id?: string;
10
  src: string;
11
  class?: string;
12
  alt?: string;
13
  position?: string;
14
  basePath?: string;
15
  seed?: string; // 用于生成随机图API的种子（文章slug）
16
  preview?: boolean; // 是否是预览模式（文章列表页），true为预览模式（小尺寸），false为详情页（大尺寸）
17
  fallback?: string; // 图片加载失败时的备用图片
18
}
19

20
const {
21
  id,
22
  src,
23
  alt,
24
  position = "center",
25
  basePath = "/",
26
  seed,
27
  preview = false,
28
  fallback,
29
} = Astro.props;
30
const className = Astro.props.class;
31

32
const isLocal = !(
33
  src.startsWith("/") ||
34
  src.startsWith("http") ||
35
  src.startsWith("https") ||
36
  src.startsWith("data:")
37
);
38
const isPublic = src.startsWith("/");
39

40
// 检查是否是随机图API（包含query参数v=）
41
const isRandomApiImage =
42
  (src.startsWith("http://") || src.startsWith("https://")) &&
43
  src.includes("?v=");
44

45
// TODO temporary workaround for images dynamic import
46
// https://github.com/withastro/astro/issues/3373
47
// biome-ignore lint/suspicious/noImplicitAnyLet: <check later>
48
let img;
49
if (isLocal) {
50
  const files = import.meta.glob<ImageMetadata>("../../**", {
51
    import: "default",
52
  });
53
  let normalizedPath = path
54
    .normalize(path.join("../../", basePath, src))
55
    .replace(/\\/g, "/");
56
  const file = files[normalizedPath];
57
  if (!file) {
58
    console.error(
59
      `\n[ERROR] Image file not found: ${normalizedPath.replace("../../", "src/")}`,
60
    );
61
  }
62
  img = await file();
63
}
64
// 如果是随机图API，生成所有API URL列表用于客户端重试
65
let allApiUrls: string[] = [];
66
if (
67
  isRandomApiImage &&
68
  coverImageConfig.enable &&
69
  coverImageConfig.apis &&
70
  coverImageConfig.apis.length > 0
71
) {
72
  allApiUrls = generateApiUrls(seed);
73
}
74

75
// 确定fallback图片路径
76
let fallbackSrc = "";
77
if (isRandomApiImage) {
78
  if (coverImageConfig.enable) {
79
    fallbackSrc = fallback || coverImageConfig.fallback || "";
80
  }
81
} else {
82
  fallbackSrc = fallback || "";
83
}
84

85
// 处理fallback URL
86
const getFallbackUrl = (src: string): string => {
87
  if (!src) return "";
88
  if (src.startsWith("http://") || src.startsWith("https://")) {
89
    return src;
90
  }
91
  if (src.startsWith("/")) {
92
    return url(src);
93
  }
94
  return url(`/${src}`);
95
};
96

97
// 图片样式
98
const imageClass = "w-full h-full object-cover";
99
const imageStyle = `object-position: ${position || "center"}; image-rendering: -webkit-optimize-contrast;`;
100

101
// 水印配置
102
const watermark = coverImageConfig.watermark;
103
const showWatermark = isRandomApiImage && watermark?.enable;
104

105
// 生成水印位置样式和类名
106
const getWatermarkStyles = (
107
  pos?: string,
108
): { classes: string; styles: string } => {
109
  const position = pos || "bottom-right";
110
  let classes = "";
111
  let styles = "";
112

113
  switch (position) {
114
    case "top-left":
115
      classes = "top-2 left-2";
116
      break;
117
    case "top-right":
118
      classes = "top-2 right-2";
119
      break;
120
    case "bottom-left":
121
      classes = "top-2 left-2 md:top-auto md:bottom-2 md:left-2";
122
      break;
123
    case "bottom-right":
124
      classes = "top-2 right-2 md:top-auto md:bottom-2 md:right-2";
125
      break;
126
    case "center":
127
      classes = "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2";
128
      break;
129
    default:
130
      classes = "top-2 right-2 md:top-auto md:bottom-2 md:right-2";
131
  }
132

133
  styles = `padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: ${watermark?.fontSize || "0.75rem"}; color: ${watermark?.color || "#ffffff"}; background-color: ${watermark?.backgroundColor || "rgba(0, 0, 0, 0.4)"}; opacity: ${watermark?.opacity || 0.6}; pointer-events: none; z-index: 10; white-space: nowrap; user-select: none;`;
134

135
  return { classes, styles };
136
};
137

138
const watermarkStyles = showWatermark
139
  ? getWatermarkStyles(watermark?.position)
140
  : { classes: "", styles: "" };
141
---
142

143
<div id={id} class:list={[
144
  className,
145
  'overflow-hidden relative',
146
  preview ? 'min-h-[150px] md:min-h-0' : 'min-h-[300px]'
147
]}>
148
  <!-- 加载指示器：只对随机图API显示 -->
149
  {isRandomApiImage && (
150
    <div
151
      class="image-loading-indicator absolute inset-0 flex items-center justify-center z-20 transition-opacity duration-300"
152
      style={`background-color: ${coverImageConfig.loading?.backgroundColor || '#fefefe'};`}
153
    >
154
      <img
155
        src={url(coverImageConfig.loading?.image || "/assets/images/loading.gif")}
156
        alt="Loading..."
157
        class="w-24 h-24 md:w-32 md:h-32 opacity-80"
158
      />
159
    </div>
160
  )}
161

162
  <!-- 本地图片：使用 Astro Image 组件 -->
163
  {isLocal && img && (
164
    <Image
165
      src={img}
166
      alt={alt || ""}
167
      class:list={[
168
        imageClass,
169
        preview ? 'random-cover-preview-image' : 'random-cover-full-image'
170
      ]}
171
      style={imageStyle}
172
      width={preview ? 400 : 1200}
173
      height={preview ? 300 : 800}
174
      loading="lazy"
175
      format="webp"
176
      quality={preview ? 80 : 90}
177
      widths={preview ? [200, 400, 600] : [800, 1200, 1600, 2000]}
178
      sizes={preview ? "(max-width: 768px) 100vw, 28vw" : "(max-width: 768px) 100vw, (max-width: 1200px) 90vw, 1200px"}
179
    />
180
  )}
181

182
  <!-- 远程图片（包括随机图API和普通远程图片） -->
183
  {!isLocal && (
184
    <img
185
      src={isPublic ? url(src) : src}
186
      alt={alt || ""}
187
      class:list={[
188
        imageClass,
189
        preview ? 'random-cover-preview-image' : 'random-cover-full-image'
190
      ]}
191
      style={imageStyle}
192
      loading="lazy"
193
      decoding="async"
194
      data-preview={preview ? "true" : "false"}
195
      data-seed={seed || ""}
196
      data-api-urls={allApiUrls.length > 0 ? JSON.stringify(allApiUrls) : ""}
197
      data-fallback={fallbackSrc ? getFallbackUrl(fallbackSrc) : ""}
198
      data-api-index={allApiUrls.length > 0 ? "0" : ""}
199
      data-enable={isRandomApiImage ? (coverImageConfig.enable ? "true" : "false") : ""}
200
      data-need-check-fallback="true"
201
    onloadstart={`(function(img){
202
      const container = img.parentElement;
203
      if (container) {
204
        const loadingIndicator = container.querySelector('.image-loading-indicator');
205
        if (loadingIndicator) {
206
          loadingIndicator.classList.remove('hidden');
207
          loadingIndicator.style.removeProperty('opacity');
208
          loadingIndicator.style.removeProperty('display');
209
        }
210
      }
211
    })(this);`}
212
    onload={`(function(img){
213
      if (img.naturalWidth > 0 && img.naturalHeight > 0) {
214
        setTimeout(function() {
215
          const container = img.parentElement;
216
          if (container) {
217
            const loadingIndicator = container.querySelector('.image-loading-indicator');
218
            if (loadingIndicator) {
219
              loadingIndicator.style.setProperty('opacity', '0', 'important');
220
              loadingIndicator.style.setProperty('transition', 'opacity 0.3s ease-out', 'important');
221
              setTimeout(function() {
222
                loadingIndicator.style.setProperty('display', 'none', 'important');
223
                loadingIndicator.classList.add('hidden');
224
              }, 300);
225
            }
226
            const watermarkEl = container.querySelector('[data-watermark]');
227
            if (watermarkEl && watermarkEl.getAttribute('data-watermark-visible') !== 'true') {
228
              watermarkEl.setAttribute('data-watermark-visible', 'true');
229
              watermarkEl.classList.remove('opacity-0');
230
              watermarkEl.classList.add('opacity-100');
231
              const originalOpacity = watermarkEl.getAttribute('data-original-opacity') || '0.6';
232
              watermarkEl.style.opacity = originalOpacity;
233
            }
234
          }
235
        }, 800);
236
      }
237
    })(this);`}
238
    onerror={`(function(img){
239
      try {
240
        const apiUrls = img.dataset.apiUrls ? JSON.parse(img.dataset.apiUrls) : [];
241
        let currentIndex = parseInt(img.dataset.apiIndex || '0');
242
        const isEnabled = img.dataset.enable !== 'false';
243
        const fallbackUrl = img.dataset.fallback;
244

245
        if (apiUrls.length > 0 && currentIndex < apiUrls.length - 1) {
246
          currentIndex = currentIndex + 1;
247
          img.dataset.apiIndex = currentIndex.toString();
248
          img.src = apiUrls[currentIndex];
249
        }
250
        else if (isEnabled && fallbackUrl && fallbackUrl.length > 0) {
251
          const seed = img.dataset.seed;
252
          if (seed) {
253
            try {
254
              localStorage.setItem('api_image_failed_' + seed, 'true');
255
            } catch (e) {}
256
          }
257
          const container = img.parentElement;
258
          if (container) {
259
            const watermarkEl = container.querySelector('[data-watermark]');
260
            if (watermarkEl) {
261
              watermarkEl.textContent = 'Image API Error';
262
              watermarkEl.setAttribute('data-error', 'true');
263
            }
264
          }
265
          img.onerror = null;
266
          img.src = fallbackUrl;
267
          img.addEventListener('load', function() {
268
            if (img.naturalWidth > 0 && img.naturalHeight > 0) {
269
              const container = img.parentElement;
270
              if (container) {
271
                const loadingIndicator = container.querySelector('.image-loading-indicator');
272
                if (loadingIndicator) {
273
                  loadingIndicator.style.opacity = '0';
274
                  setTimeout(function() {
275
                    loadingIndicator.style.display = 'none';
276
                  }, 300);
277
                }
278
                const watermarkEl = container.querySelector('[data-watermark]');
279
                if (watermarkEl && watermarkEl.getAttribute('data-watermark-visible') !== 'true') {
280
                  watermarkEl.setAttribute('data-watermark-visible', 'true');
281
                  watermarkEl.classList.remove('opacity-0');
282
                  watermarkEl.classList.add('opacity-100');
283
                  const originalOpacity = watermarkEl.getAttribute('data-original-opacity') || '0.6';
284
                  watermarkEl.style.opacity = originalOpacity;
285
                  watermarkEl.style.setProperty('opacity', originalOpacity, 'important');
286
                }
287
              }
288
            }
289
          }, { once: true });
290
        }
291
        else {
292
          img.onerror = null;
293
          img.style.display = 'none';
294
          const container = img.parentElement;
295
          if (container) {
296
            const loadingIndicator = container.querySelector('.image-loading-indicator');
297
            if (loadingIndicator) {
298
              loadingIndicator.style.opacity = '0';
299
              setTimeout(function() {
300
                loadingIndicator.style.display = 'none';
301
              }, 300);
302
            }
303
          }
304
        }
305
      } catch(e) {
306
        const isEnabled = img.dataset.enable !== 'false';
307
        const fallbackUrl = img.dataset.fallback;
308
        const seed = img.dataset.seed;
309
        if (isEnabled && fallbackUrl && fallbackUrl.length > 0) {
310
          if (seed) {
311
            try {
312
              localStorage.setItem('api_image_failed_' + seed, 'true');
313
            } catch (e) {}
314
          }
315
          const container = img.parentElement;
316
          if (container) {
317
            const watermarkEl = container.querySelector('[data-watermark]');
318
            if (watermarkEl) {
319
              watermarkEl.textContent = 'Image API Error';
320
              watermarkEl.setAttribute('data-error', 'true');
321
            }
322
          }
323
          img.onerror = null;
324
          img.src = fallbackUrl;
325
        } else {
326
          img.onerror = null;
327
          img.style.display = 'none';
328
          const container = img.parentElement;
329
          if (container) {
330
            const loadingIndicator = container.querySelector('.image-loading-indicator');
331
            if (loadingIndicator) {
332
              loadingIndicator.style.opacity = '0';
333
              setTimeout(function() {
334
                loadingIndicator.style.display = 'none';
335
              }, 300);
336
            }
337
          }
338
        }
339
      }
340
    })(this);`}
341
    />
342
  )}
343

344
  {showWatermark && (
345
    <div
346
      data-watermark="true"
347
      data-watermark-visible="false"
348
      data-original-opacity={watermark?.opacity || "0.6"}
349
      class:list={["absolute", watermarkStyles.classes, "pointer-events-none", "z-10"]}
350
      style={`${watermarkStyles.styles} opacity: 0 !important;`}
351
    >
352
      {watermark?.text || "Random Cover"}
353
    </div>
354
  )}
355
</div>
356

357
<style>
358
  .image-loading-indicator {
359
    opacity: 1 !important;
360
    display: flex !important;
361
    visibility: visible !important;
362
    z-index: 20;
363
  }
364

365
  .image-loading-indicator.hidden {
366
    opacity: 0 !important;
367
    display: none !important;
368
    visibility: hidden !important;
369
  }
370

371
  img.random-cover-preview-image,
372
  img[data-preview="true"] {
373
    min-height: 150px;
374
    @media (min-width: 768px) {
375
      min-height: 0;
376
    }
377
    image-rendering: -webkit-optimize-contrast !important;
378
    image-rendering: auto !important;
379
    transform: translateZ(0);
380
    -webkit-transform: translateZ(0);
381
    will-change: transform;
382
    backface-visibility: hidden;
383
    -webkit-backface-visibility: hidden;
384
    -ms-interpolation-mode: bicubic;
385
    object-fit: cover !important;
386
    max-width: 100%;
387
    max-height: 100%;
388
    width: 100%;
389
    height: 100%;
390
  }
391

392
  img.random-cover-full-image {
393
    min-height: 300px;
394
    image-rendering: -webkit-optimize-contrast !important;
395
    image-rendering: auto !important;
396
    transform: translateZ(0);
397
    -webkit-transform: translateZ(0);
398
    object-fit: cover !important;
399
    width: 100%;
400
    height: 100%;
401
  }
402
</style>
403

404
<script is:inline>
405
  (function() {
406
    function isPageRefresh() {
407
      try {
408
        if (window.performance && window.performance.getEntriesByType) {
409
          const navEntries = window.performance.getEntriesByType('navigation');
410
          if (navEntries.length > 0) {
411
            const navType = navEntries[0].type;
412
            if (navType === 'reload' || navType === 'navigate') {
413
              return true;
414
            }
415
            if (navType === 'back_forward') {
416
              return false;
417
            }
418
          }
419
        }
420
        if (window.performance && window.performance.navigation) {
421
          const navType = window.performance.navigation.type;
422
          if (navType === 1 || navType === 0) {
423
            return true;
424
          }
425
          if (navType === 2) {
426
            return false;
427
          }
428
        }
429
        const refreshCheckKey = 'random_cover_image_last_init_time';
430
        const navigationCheckKey = 'random_cover_image_navigation_type';
431
        const now = Date.now();
432
        const lastInitTime = sessionStorage.getItem(refreshCheckKey);
433
        const lastNavType = sessionStorage.getItem(navigationCheckKey);
434

435
        if (!lastInitTime || (now - parseInt(lastInitTime)) > 10000) {
436
          sessionStorage.setItem(refreshCheckKey, now.toString());
437
          sessionStorage.setItem(navigationCheckKey, 'refresh');
438
          return true;
439
        }
440

441
        if (lastNavType === 'back_forward' && (now - parseInt(lastInitTime)) < 5000) {
442
          return false;
443
        }
444

445
        sessionStorage.setItem(refreshCheckKey, now.toString());
446
        sessionStorage.setItem(navigationCheckKey, 'refresh');
447
        return true;
448
      } catch (e) {
449
        console.warn('Unable to detect page refresh type, clearing cache as fallback', e);
450
        return true;
451
      }
452
    }
453

454
    function clearApiFailureCache() {
455
      try {
456
        const keysToRemove = [];
457
        for (let i = 0; i < localStorage.length; i++) {
458
          const key = localStorage.key(i);
459
          if (key && key.startsWith('api_image_failed_')) {
460
            keysToRemove.push(key);
461
          }
462
        }
463
        keysToRemove.forEach(function(key) {
464
          localStorage.removeItem(key);
465
        });
466
        if (keysToRemove.length > 0) {
467
          console.log('Cleared ' + keysToRemove.length + ' API failure records on page refresh');
468
        }
469
      } catch (e) {
470
        console.warn('Failed to clear API failure cache', e);
471
      }
472
    }
473

474
    function checkAndUseFallbackForFailedApis() {
475
      const allApiImages = document.querySelectorAll('img[data-seed][data-fallback][data-enable="true"]');
476

477
      allApiImages.forEach(function(img) {
478
        const seed = img.dataset.seed;
479
        const fallbackUrl = img.dataset.fallback;
480

481
        if (seed && fallbackUrl) {
482
          try {
483
            const failureKey = 'api_image_failed_' + seed;
484
            if (localStorage.getItem(failureKey) === 'true') {
485
              if (img.src !== fallbackUrl && !img.src.includes(fallbackUrl.split('?')[0])) {
486
                img.src = fallbackUrl;
487
              }
488
              const container = img.parentElement;
489
              if (container) {
490
                const watermarkEl = container.querySelector('[data-watermark]');
491
                if (watermarkEl) {
492
                  watermarkEl.textContent = 'Image API Error';
493
                  watermarkEl.setAttribute('data-error', 'true');
494
                  const loadingIndicator = container.querySelector('.image-loading-indicator');
495
                  if (img.complete && img.naturalWidth > 0 && img.naturalHeight > 0) {
496
                    if (loadingIndicator) {
497
                      loadingIndicator.style.opacity = '0';
498
                      setTimeout(function() {
499
                        loadingIndicator.style.display = 'none';
500
                      }, 300);
501
                    }
502
                    watermarkEl.setAttribute('data-watermark-visible', 'true');
503
                    watermarkEl.classList.remove('opacity-0');
504
                    watermarkEl.classList.add('opacity-100');
505
                    const originalOpacity = watermarkEl.getAttribute('data-original-opacity') || '0.6';
506
                    watermarkEl.style.opacity = originalOpacity;
507
                    watermarkEl.style.setProperty('opacity', originalOpacity, 'important');
508
                  } else {
509
                    img.addEventListener('load', function() {
510
                      if (img.naturalWidth > 0 && img.naturalHeight > 0) {
511
                        if (loadingIndicator) {
512
                          loadingIndicator.style.opacity = '0';
513
                          setTimeout(function() {
514
                            loadingIndicator.style.display = 'none';
515
                          }, 300);
516
                        }
517
                        watermarkEl.setAttribute('data-watermark-visible', 'true');
518
                        watermarkEl.classList.remove('opacity-0');
519
                        watermarkEl.classList.add('opacity-100');
520
                        const originalOpacity = watermarkEl.getAttribute('data-original-opacity') || '0.6';
521
                        watermarkEl.style.opacity = originalOpacity;
522
                        watermarkEl.style.setProperty('opacity', originalOpacity, 'important');
523
                      }
524
                    }, { once: true });
525
                  }
526
                }
527
              }
528
            }
529
          } catch (e) {}
530
        }
531
      });
532
    }
533

534
    function showLoadingIndicator(img) {
535
      if (!img.dataset.seed && img.dataset.preview !== 'true') {
536
        return;
537
      }
538
      const container = img.closest('[id]') || img.parentElement;
539
      if (container) {
540
        const loadingIndicator = container.querySelector('.image-loading-indicator');
541
        if (loadingIndicator) {
542
          loadingIndicator.classList.remove('hidden');
543
          loadingIndicator.style.removeProperty('opacity');
544
          loadingIndicator.style.removeProperty('display');
545
        }
546
      }
547
    }
548

549
    function hideLoadingIndicator(img) {
550
      if (!img.dataset.seed && img.dataset.preview !== 'true') {
551
        return;
552
      }
553
      const container = img.closest('[id]') || img.parentElement;
554
      if (container) {
555
        const loadingIndicator = container.querySelector('.image-loading-indicator');
556
        if (loadingIndicator) {
557
          setTimeout(function() {
558
            loadingIndicator.style.setProperty('opacity', '0', 'important');
559
            loadingIndicator.style.setProperty('transition', 'opacity 0.3s ease-out', 'important');
560
            setTimeout(function() {
561
              loadingIndicator.style.setProperty('display', 'none', 'important');
562
              loadingIndicator.classList.add('hidden');
563
            }, 300);
564
          }, 800);
565
        }
566
      }
567
    }
568

569
    function showWatermark(img) {
570
      if (!img.complete || img.naturalWidth === 0 || img.naturalHeight === 0) {
571
        return;
572
      }
573
      hideLoadingIndicator(img);
574
      const container = img.closest('[id]') || img.parentElement;
575
      if (container) {
576
        const watermarkEl = container.querySelector('[data-watermark]');
577
        if (watermarkEl && watermarkEl.getAttribute('data-watermark-visible') !== 'true') {
578
          watermarkEl.setAttribute('data-watermark-visible', 'true');
579
          watermarkEl.classList.remove('opacity-0');
580
          watermarkEl.classList.add('opacity-100');
581
          const originalOpacity = watermarkEl.getAttribute('data-original-opacity') || '0.6';
582
          watermarkEl.style.opacity = originalOpacity;
583
          watermarkEl.style.setProperty('opacity', originalOpacity, 'important');
584
        }
585
      }
586
    }
587

588
    function optimizePreviewImages() {
589
      const previewImages = document.querySelectorAll('img[data-preview="true"]');
590
      previewImages.forEach(function(img) {
591
        if (!img.complete || img.naturalWidth === 0 || img.naturalHeight === 0) {
592
          showLoadingIndicator(img);
593
          img.addEventListener('loadstart', function() {
594
            showLoadingIndicator(img);
595
          }, { once: true });
596
        }
597
      });
598
    }
599

600
    function setupObserver() {
601
      const observer = new MutationObserver(function(mutations) {
602
        mutations.forEach(function(mutation) {
603
          mutation.addedNodes.forEach(function(node) {
604
            if (node.nodeType === Node.ELEMENT_NODE) {
605
              const element = node;
606
              const apiImages = [];
607
              if (element.tagName === 'IMG' && element.dataset.seed && element.dataset.fallback) {
608
                apiImages.push(element);
609
              }
610
              const childApiImages = element.querySelectorAll ? element.querySelectorAll('img[data-seed][data-fallback]') : [];
611
              childApiImages.forEach(function(img) {
612
                if (!apiImages.includes(img)) {
613
                  apiImages.push(img);
614
                }
615
              });
616

617
              apiImages.forEach(function(img) {
618
                showLoadingIndicator(img);
619
                if (img.getAttribute('data-need-check-fallback') === 'true') {
620
                  checkAndUseFallbackForFailedApis();
621
                  img.removeAttribute('data-need-check-fallback');
622
                }
623
                if (img.complete && img.naturalWidth > 0 && img.naturalHeight > 0) {
624
                  hideLoadingIndicator(img);
625
                  showWatermark(img);
626
                } else {
627
                  img.addEventListener('loadstart', function() {
628
                    showLoadingIndicator(img);
629
                  }, { once: true });
630
                  img.addEventListener('load', function() {
631
                    if (img.naturalWidth > 0 && img.naturalHeight > 0) {
632
                      hideLoadingIndicator(img);
633
                      showWatermark(img);
634
                    }
635
                  }, { once: true });
636
                  img.addEventListener('error', function() {
637
                    setTimeout(function() {
638
                      hideLoadingIndicator(img);
639
                    }, 500);
640
                  }, { once: true });
641
                }
642
              });
643
            }
644
          });
645
        });
646
      });
647

648
      if (document.body) {
649
        observer.observe(document.body, { childList: true, subtree: true });
650
      } else {
651
        document.addEventListener('DOMContentLoaded', function() {
652
          observer.observe(document.body, { childList: true, subtree: true });
653
        });
654
      }
655
    }
656

657
    function initializeImages() {
658
      if (isPageRefresh()) {
659
        clearApiFailureCache();
660
      } else {
661
        checkAndUseFallbackForFailedApis();
662
      }
663
      optimizePreviewImages();
664

665
      const allApiImages = document.querySelectorAll('img[data-seed][data-fallback]');
666
      allApiImages.forEach(function(img) {
667
        showLoadingIndicator(img);
668
        img.addEventListener('loadstart', function() {
669
          showLoadingIndicator(img);
670
        }, { once: true });
671

672
        if (img.complete && img.naturalWidth > 0 && img.naturalHeight > 0) {
673
          hideLoadingIndicator(img);
674
          showWatermark(img);
675
        } else {
676
          img.addEventListener('load', function() {
677
            if (img.naturalWidth > 0 && img.naturalHeight > 0) {
678
              hideLoadingIndicator(img);
679
              showWatermark(img);
680
            }
681
          }, { once: true });
682
          img.addEventListener('error', function() {
683
            setTimeout(function() {
684
              hideLoadingIndicator(img);
685
            }, 500);
686
          }, { once: true });
687
        }
688
      });
689

690
      setupObserver();
691
    }
692

693
    if (document.readyState === 'loading') {
694
      document.addEventListener('DOMContentLoaded', initializeImages);
695
    } else {
696
      initializeImages();
697
    }
698

699
    // 监听页面可见性变化（从其他页面返回时重新检查）
700
    document.addEventListener('visibilitychange', function() {
701
      if (!document.hidden) {
702
        if (!isPageRefresh()) {
703
          setTimeout(checkAndUseFallbackForFailedApis, 100);
704
        }
705
      }
706
    });
707

708
    // 监听popstate事件（浏览器前进/后退）
709
    window.addEventListener('popstate', function() {
710
      try {
711
        sessionStorage.setItem('random_cover_image_navigation_type', 'back_forward');
712
        sessionStorage.setItem('random_cover_image_last_init_time', Date.now().toString());
713
      } catch (e) {
714
        // 忽略错误
715
      }
716
      setTimeout(function() {
717
        checkAndUseFallbackForFailedApis();
718
      }, 50);
719
    });
720
  })();
721
</script>