v2.5.11:随机图API支持设备自适应；管理端支持列表/卡片偏好记录，列表视图支持框选多选

Author: MarSeventh

css/443.ec67a62b.css css/201.0f420a08.csscss/443.ec67a62b.css renamed to css/201.0f420a08.css

@@ -0,0 +1,128 @@
+/**
+ * 自适应图片方向检测模块
+ * 
+ * 提供设备检测和方向决策的纯函数，用于 orientation=auto 自适应模式。
+ */
+
+/**
+ * 移动设备 User-Agent 关键词匹配正则
+ */
+const MOBILE_UA_REGEX = /Mobile|Android|iPhone|iPad|iPod|webOS|BlackBerry|Opera Mini|IEMobile/i;
+
+/**
+ * 从 HTTP 请求中检测设备信息。
+ * 
+ * 检测策略（按优先级）：
+ * 1. 优先读取 Client Hints 头（Sec-CH-Viewport-Width / Sec-CH-Viewport-Height），
+ *    两者都存在且为有效正数时，返回视口宽高比。
+ * 2. 回退到 User-Agent 解析，匹配移动设备关键词判断设备类型。
+ * 3. 都无法判断时返回 { source: null }。
+ * 
+ * @param {Request} request - Cloudflare Workers Request 对象
+ * @returns {{ source: 'client-hints' | 'user-agent' | null, viewportRatio?: number, deviceType?: 'mobile' | 'desktop' }}
+ */
+export function detectDevice(request) {
+    // 策略 1：Client Hints
+    const viewportWidth = request.headers.get('Sec-CH-Viewport-Width');
+    const viewportHeight = request.headers.get('Sec-CH-Viewport-Height');
+
+    if (viewportWidth !== null && viewportHeight !== null) {
+        const width = Number(viewportWidth);
+        const height = Number(viewportHeight);
+
+        if (isFinite(width) && isFinite(height) && width > 0 && height > 0) {
+            return {
+                source: 'client-hints',
+                viewportRatio: width / height,
+            };
+        }
+    }
+
+    // 策略 2：User-Agent 解析
+    const userAgent = request.headers.get('User-Agent');
+
+    if (userAgent) {
+        const isMobile = MOBILE_UA_REGEX.test(userAgent);
+        return {
+            source: 'user-agent',
+            deviceType: isMobile ? 'mobile' : 'desktop',
+        };
+    }
+
+    // 策略 3：无法判断
+    return { source: null };
+}
+
+
+/**
+ * 根据设备信息决定图片方向。
+ * 
+ * 决策逻辑：
+ * - Client Hints 模式：根据视口宽高比判断
+ *   - ratio > 1.1 → 'landscape'
+ *   - ratio < 0.9 → 'portrait'
+ *   - 0.9 <= ratio <= 1.1 → 'square'
+ * - User-Agent 模式：根据设备类型判断
+ *   - mobile → 'portrait'
+ *   - desktop → 'landscape'
+ * - 无法判断时（source === null）：返回空字符串，不进行方向过滤
+ * 
+ * @param {{ source: 'client-hints' | 'user-agent' | null, viewportRatio?: number, deviceType?: 'mobile' | 'desktop' }} deviceInfo
+ * @returns {'landscape' | 'portrait' | 'square' | ''}
+ */
+export function resolveOrientation(deviceInfo) {
+    if (deviceInfo.source === 'client-hints') {
+        const ratio = deviceInfo.viewportRatio;
+        if (ratio > 1.1) {
+            return 'landscape';
+        }
+        if (ratio < 0.9) {
+            return 'portrait';
+        }
+        return 'square';
+    }
+
+    if (deviceInfo.source === 'user-agent') {
+        if (deviceInfo.deviceType === 'mobile') {
+            return 'portrait';
+        }
+        if (deviceInfo.deviceType === 'desktop') {
+            return 'landscape';
+        }
+    }
+
+    // source === null 或无法判断
+    return '';
+}
+
+/**
+ * 为响应添加 Client Hints 协商头。
+ *
+ * - 设置 Accept-CH 头，请求浏览器在后续请求中发送视口尺寸信息
+ * - 添加/追加 Vary 头，确保缓存按 Client Hints 和 User-Agent 区分
+ *
+ * @param {Headers} headers - 响应头对象
+ * @returns {Headers} 添加了 Accept-CH 和 Vary 头的响应头对象
+ */
+export function addClientHintsHeaders(headers) {
+    // 设置 Accept-CH 头
+    headers.set('Accept-CH', 'Sec-CH-Viewport-Width, Sec-CH-Viewport-Height');
+
+    // 添加/追加 Vary 头
+    const varyValues = ['Sec-CH-Viewport-Width', 'Sec-CH-Viewport-Height', 'User-Agent'];
+    const existingVary = headers.get('Vary');
+
+    if (existingVary) {
+        // 解析已有的 Vary 值，避免重复添加
+        const existingValues = existingVary.split(',').map(v => v.trim().toLowerCase());
+        const newValues = varyValues.filter(v => !existingValues.includes(v.toLowerCase()));
+
+        if (newValues.length > 0) {
+            headers.set('Vary', existingVary + ', ' + newValues.join(', '));
+        }
+    } else {
+        headers.set('Vary', varyValues.join(', '));
+    }
+
+    return headers;
+}

css/443.ec67a62b.css.gz css/201.0f420a08.css.gzcss/443.ec67a62b.css.gz renamed to css/201.0f420a08.css.gz

@@ -1,5 +1,6 @@
 import { fetchOthersConfig } from "../utils/sysConfig";
 import { readIndex } from "../utils/indexManager";
+import { detectDevice, resolveOrientation, addClientHintsHeaders } from "./adaptive.js";
 
 let othersConfig = {};
 let allowRandom = false;
@@ -40,8 +41,24 @@ export async function onRequest(context) {
         fileType = fileType.split(',');
     }
 
-    // 读取图片方向参数：landscape(横图), portrait(竖图), square(方图)
-    const orientation = requestUrl.searchParams.get('orientation') || '';
+    // 读取图片方向参数：landscape(横图), portrait(竖图), square(方图), auto(自适应)
+    const orientationParam = requestUrl.searchParams.get('orientation') || '';
+
+    // 根据参数值决定行为
+    const VALID_ORIENTATIONS = ['landscape', 'portrait', 'square'];
+    let orientation = '';
+    let isAutoMode = false;
+
+    if (VALID_ORIENTATIONS.includes(orientationParam)) {
+        // 手动指定有效方向，直接使用
+        orientation = orientationParam;
+    } else if (orientationParam === 'auto') {
+        // 自适应模式：检测设备并自动决策
+        isAutoMode = true;
+        const deviceInfo = detectDevice(request);
+        orientation = resolveOrientation(deviceInfo);
+    }
+    // 其他情况（未指定或无效值）：orientation 保持空字符串，不过滤
 
     // 读取指定文件夹
     const paramDir = requestUrl.searchParams.get('dir') || '';
@@ -65,6 +82,9 @@ export async function onRequest(context) {
     // 筛选出符合fileType要求的记录
     allRecords = allRecords.filter(item => { return fileType.some(type => item.FileType?.includes(type)) });
 
+    // 保存过滤前的记录，用于自适应模式降级
+    const allRecordsBeforeOrientationFilter = allRecords;
+
     // 根据图片方向筛选
     if (orientation && allRecords.length > 0) {
         const SQUARE_THRESHOLD = 0.1; // 宽高比差异小于10%视为方图
@@ -86,9 +106,19 @@ export async function onRequest(context) {
         });
     }
 
+    // 自适应模式降级：过滤后无匹配图片时，降级到全部图片
+    if (isAutoMode && orientation && allRecords.length === 0) {
+        allRecords = allRecordsBeforeOrientationFilter;
+    }
+
+    // 构建响应头：自适应模式下添加 Client Hints 协商头
+    const responseHeaders = new Headers();
+    if (isAutoMode) {
+        addClientHintsHeaders(responseHeaders);
+    }
 
     if (allRecords.length == 0) {
-        return new Response(JSON.stringify({}), { status: 200 });
+        return new Response(JSON.stringify({}), { status: 200, headers: responseHeaders });
     } else {
         const randomIndex = Math.floor(Math.random() * allRecords.length);
         const randomKey = allRecords[randomIndex];
@@ -108,19 +138,23 @@ export async function onRequest(context) {
             // Return an image response
             randomUrl = requestUrl.origin + randomPath;
             let contentType = 'image/jpeg';
+            const imgHeaders = new Headers(responseHeaders);
             return new Response(await fetch(randomUrl).then(res => {
                 contentType = res.headers.get('content-type');
                 return res.blob();
             }), {
-                headers: contentType ? { 'Content-Type': contentType } : { 'Content-Type': 'image/jpeg' },
+                headers: (() => {
+                    imgHeaders.set('Content-Type', contentType || 'image/jpeg');
+                    return imgHeaders;
+                })(),
                 status: 200
             });
         }
 
         if (resType == 'text') {
-            return new Response(randomUrl, { status: 200 });
+            return new Response(randomUrl, { status: 200, headers: responseHeaders });
         } else {
-            return new Response(JSON.stringify({ url: randomUrl }), { status: 200 });
+            return new Response(JSON.stringify({ url: randomUrl }), { status: 200, headers: responseHeaders });
         }
     }
 }

functions/random/adaptive.js

@@ -1 +1 @@
-<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/logo.png"><link rel="apple-touch-icon" href="/logo.png"><link rel="mask-icon" href="/logo.png" color="#f4b400"><meta name="description" content="Sanyue ImgHub - A modern file hosting platform"><meta name="keywords" content="Sanyue, ImgHub, file hosting, image hosting, cloud storage"><meta name="author" content="SanyueQi"><title>Sanyue ImgHub</title><script defer="defer" src="/js/chunk-vendors.75bb1397.js"></script><script defer="defer" src="/js/app.f1037a91.js"></script><link href="/css/chunk-vendors.4363ed49.css" rel="stylesheet"><link href="/css/app.75711fde.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but sanyue_imghub doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
+<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/logo.png"><link rel="apple-touch-icon" href="/logo.png"><link rel="mask-icon" href="/logo.png" color="#f4b400"><meta name="description" content="Sanyue ImgHub - A modern file hosting platform"><meta name="keywords" content="Sanyue, ImgHub, file hosting, image hosting, cloud storage"><meta name="author" content="SanyueQi"><title>Sanyue ImgHub</title><script defer="defer" src="/js/chunk-vendors.75bb1397.js"></script><script defer="defer" src="/js/app.1b7ddf66.js"></script><link href="/css/chunk-vendors.4363ed49.css" rel="stylesheet"><link href="/css/app.75711fde.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but sanyue_imghub doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>