feat: Added popular search recommendation function

feat: Added auto play of next video in player

README.md

@@ -4,7 +4,7 @@
 
   # AvHub - R18 Resource Search & Management Tool 
 
-  **AvHub** is a web platform dedicated to the retrieval and management of adult video resources.  
+  **AvHub** is a web platform dedicated to the retrieval and management of `R18` video resources.  
 
 Cloudflare Page: https://avhub.pages.dev/  
 
@@ -55,7 +55,7 @@ python main.py
 ```  
 The default API address: `http://127.0.0.1:8000/`  
 
-You can configure a reverse proxy and domain, replacing `BASE_URL` in line 38 of `web/script.js`.  
+You can configure a reverse proxy and domain, replacing `BASE_URL` in line 3 of `web/config.js`.  
 
 The backend configuration file is located in `data/config.yaml`. Modify it according to your actual needs.  
 

README_CN.md

@@ -4,7 +4,7 @@
 
 # AvHub -  R18 资源搜索和管理工具
 
-**AvHub** 是一个致力于检索和管理成人视频资源的 Web 平台
+**AvHub** 是一个致力于检索和管理R18视频资源的 Web 平台
 
 Cloudflare Page: https://avhub.pages.dev/  
   
@@ -56,7 +56,7 @@ python main.py
 ```
 默认运行的API地址：`http://127.0.0.1:8000/`
 
-可以配置反代和域名，替换 `web/script.js` 38行中的 `BASE_URL`
+可以配置反代和域名，替换 `web/config.js` 3行中的 `BASE_URL`
 
 后端运行的配置文件在 `data/config.yaml` 中，请根据实际情况修改
 

main.py

@@ -19,6 +19,7 @@ import pathlib
 import re
 from concurrent.futures import ThreadPoolExecutor
 import asyncio
+from collections import Counter
 
 @hydra.main(config_path='data/', config_name='config', version_base=None)
 def main(cfg: DictConfig):
@@ -243,6 +244,88 @@ def main(cfg: DictConfig):
     scheduler_thread = threading.Thread(target=run_scheduler)
     scheduler_thread.daemon = True
     scheduler_thread.start()
+    
+    @app.get("/v1/hot_searches")
+    async def get_hot_searches(top_n: int = 5, last_n_lines: int = 2000):
+        """返回最热门的搜索词
+        
+        Args:
+            top_n: 返回的热门搜索词数量，默认为5
+            last_n_lines: 读取日志文件的最后行数，默认为1000行
+        """
+        try:
+            # 参数基本验证
+            if top_n < 1:
+                top_n = 5
+            if last_n_lines < 100:
+                last_n_lines = 1000
+                
+            log_file_path = cfg.logging.log_file
+            if not os.path.exists(log_file_path):
+                logger.error(f"Log file does not exist: {log_file_path}")
+                raise HTTPException(status_code=404, detail="Log file does not exist")
+            
+            # 使用线程池异步读取日志文件的最后N行
+            def read_last_n_lines():
+                encodings = ['utf-8', 'gbk', 'iso-8859-1']
+                
+                for encoding in encodings:
+                    try:
+                        with open(log_file_path, 'r', encoding=encoding) as f:
+                            # 使用deque优化内存使用
+                            from collections import deque
+                            return deque(f, last_n_lines)
+                    except UnicodeDecodeError:
+                        continue
+                    except Exception as e:
+                        logger.error(f"Error reading log file with {encoding}: {str(e)}")
+                        continue
+                
+                raise HTTPException(status_code=500, detail="Unable to read log file with any encoding")
+
+            # 读取日志文件最后N行
+            log_content = await asyncio.wait_for(
+                asyncio.get_event_loop().run_in_executor(executor, read_last_n_lines),
+                timeout=10
+            )
+            
+            # 提取包含"AV code"但不包含"404"的行
+            av_code_lines = [line for line in log_content if "AV code" in line and "404" not in line]
+            
+            # 从每行中提取代码
+            search_terms = []
+            for line in av_code_lines:
+                try:
+                    parts = line.split(":")
+                    if len(parts) >= 2:
+                        search_term = parts[-1].strip().lower()
+                        # 规范化搜索词，只保留字母和数字
+                        search_term = re.sub(r'[^a-zA-Z0-9]', '', search_term)
+                        if search_term:
+                            search_terms.append(search_term)
+                except Exception as e:
+                    logger.warning(f"Error processing line: {str(e)}")
+                    continue
+            
+            if not search_terms:
+                return {"status": "succeed", "data": []}
+            
+            # 统计每个搜索词的出现次数并获取指定范围的数据
+            term_counts = Counter(search_terms)
+            most_common_all = term_counts.most_common()  # 获取全部排序结果
+            start_index = top_n
+            end_index = start_index + top_n
+            selected_terms = most_common_all[start_index:end_index]  # 切片获取指定范围
+            top_terms = [term for term, _ in selected_terms]
+            
+            logger.info(f"Retrieved top {top_n*2} popular search terms from last {last_n_lines} lines")
+            return {"status": "succeed", "data": top_terms}
+        except asyncio.TimeoutError:
+            logger.error("Timeout while reading log file")
+            raise HTTPException(status_code=504, detail="Request timeout")
+        except Exception as e:
+            logger.error(f"Failed to obtain popular search terms: {str(e)}")
+            raise HTTPException(status_code=500, detail=str(e))
 
     import uvicorn
     uvicorn.run(app, host="0.0.0.0", port=8000)

utils/spider.py

@@ -179,8 +179,9 @@ class HacgSpider:
         self.logger = setup_logger(cfg)
 
     def get_pages(self):
+        url = f'{self.url}/wp/?s=%E5%90%88%E9%9B%86&submit=%E6%90%9C%E7%B4%A2'
         try:
-            response = requests.get(self.url)
+            response = requests.get(url)
             response.raise_for_status()
         except requests.RequestException as e:
             self.logger.error(f"Request Error: {e}")

web/config.js

@@ -0,0 +1,13 @@
+// config.js
+const API_CONFIG = {
+    BASE_URL: '/api/v1',
+    ENDPOINTS: {
+        SEARCH: '/avcode',
+        COLLECTIONS: '/hacg',
+        VIDEO: '/get_video',
+        HOT_SEARCHES: '/hot_searches'
+    }
+};
+
+// 导出配置
+export default API_CONFIG;

web/globals.js

@@ -0,0 +1,75 @@
+// globals.js - 包含所有需要在HTML中直接调用的全局函数
+
+// 在此处存储全局状态
+let appState = {
+    translations: null, // 将在初始化后从脚本中设置
+    currentLang: 'zh',
+    SORT_OPTIONS: null,  // 将在初始化后从脚本中设置
+};
+
+// 注册全局函数
+window.switchTab = function(tabName) {
+    // 调用主脚本中的函数
+    window.dispatchEvent(new CustomEvent('switchTab', { detail: { tabName } }));
+};
+
+window.searchMagnet = function() {
+    // 触发搜索事件
+    window.dispatchEvent(new CustomEvent('searchMagnet'));
+};
+
+window.copyToClipboard = function(text) {
+    // 触发复制事件
+    window.dispatchEvent(new CustomEvent('copyToClipboard', { detail: { text } }));
+};
+
+window.showSortMenu = function(button) {
+    // 触发排序菜单事件
+    window.dispatchEvent(new CustomEvent('showSortMenu', { detail: { button } }));
+};
+
+// 添加热门搜索词点击处理函数
+window.searchWithTerm = function(term) {
+    // 触发热门搜索词点击事件
+    window.dispatchEvent(new CustomEvent('searchWithTerm', { detail: { term } }));
+};
+
+// 添加视频页面复制URL按钮点击事件
+window.copyVideoUrl = function() {
+    const sourceUrlElement = document.getElementById('videoSourceUrl');
+    const sourceUrl = sourceUrlElement?.textContent;
+    if (!sourceUrl) return;
+    
+    // 使用全局copyToClipboard函数
+    window.copyToClipboard(sourceUrl);
+    
+    // 更新按钮状态
+    const copyButton = document.getElementById('copySourceUrl');
+    if (copyButton) {
+        copyButton.classList.add('copied');
+        const textElement = copyButton.querySelector('.tab-text');
+        if (textElement) {
+            const originalText = textElement.textContent;
+            textElement.textContent = appState.translations ? 
+                appState.translations[appState.currentLang].copied : 
+                '已复制';
+            
+            setTimeout(() => {
+                copyButton.classList.remove('copied');
+                textElement.textContent = originalText;
+            }, 2000);
+        }
+    }
+};
+
+// 注册全局事件处理函数以便主脚本可以设置全局状态
+window.setGlobalState = function(key, value) {
+    appState[key] = value;
+};
+
+// 为主脚本提供初始化方法
+window.initializeGlobals = function(data) {
+    if (data.translations) appState.translations = data.translations;
+    if (data.currentLang) appState.currentLang = data.currentLang;
+    if (data.SORT_OPTIONS) appState.SORT_OPTIONS = data.SORT_OPTIONS;
+}; 

web/index.html

@@ -7,7 +7,13 @@
     <link rel="icon" href="imgs/favicon.ico">
     <link href="https://testingcf.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
     <link href="style.css" rel="stylesheet">
-    <link href="https://testingcf.jsdelivr.net/npm/hls.js@1.4.12/dist/hls.min.js" rel="stylesheet">
+    <meta name="theme-color" content="#000000">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-title" content="AvHub">
+    <link rel="manifest" href="manifest.json">
+    <link rel="apple-touch-icon" href="imgs/icon-192x192.png">
 </head>
 <body class="bg-gradient-to-br from-slate-900 to-slate-800 min-h-screen text-gray-100 transition-colors duration-300">
     <!-- 在 body 标签下添加 logo -->
@@ -57,6 +63,16 @@
 
         <!-- AV搜索区域 -->
         <div id="searchTab" class="tab-content">
+            <!-- 热门搜索词区域 -->
+            <div class="max-w-2xl mx-auto mb-4">
+                <div class="hot-searches flex items-center gap-2 text-sm">
+                    <span class="label-text">
+                        <span class="tab-text" data-zh="热门搜索：" data-en="Hot Searches:">热门搜索：</span>
+                    </span>
+                    <div id="hotSearches" class="flex flex-wrap gap-2"></div>
+                </div>
+            </div>
+            
             <!-- 搜索框 -->
             <div class="max-w-2xl mx-auto mb-8">
                 <div class="flex gap-2">
@@ -140,6 +156,14 @@
                             <span class="ml-2 tab-text" data-zh="自动播放" data-en="Auto Play">自动播放</span>
                         </label>
                     </div>
+
+                    <div class="autoplay-toggle flex items-center">
+                        <input type="checkbox" id="autoNextToggle" class="hidden">
+                        <label for="autoNextToggle" class="cursor-pointer flex items-center">
+                            <span class="toggle-switch"></span>
+                            <span class="ml-2 tab-text" data-zh="自动下一个" data-en="Auto Next">自动下一个</span>
+                        </label>
+                    </div>
                     <button id="nextVideo" class="next-button px-6 py-2">
                         <span class="tab-text" data-zh="下一个" data-en="Next">下一个</span>
                     </button>
@@ -151,7 +175,7 @@
                         </div>
                         <div class="source-url truncate font-mono" id="videoSourceUrl"></div>
                     </div>
-                    <button id="copySourceUrl" class="copy-button flex items-center px-3 py-1.5 rounded">
+                    <button id="copySourceUrl" class="copy-button flex items-center px-3 py-1.5 rounded" onclick="copyVideoUrl()">
                         <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path>
                         </svg>
@@ -169,8 +193,12 @@
         </svg>
     </button>
 
+    <!-- 正确位置加载HLS.js -->
     <script src="https://testingcf.jsdelivr.net/npm/hls.js@1.4.12/dist/hls.min.js"></script>
-    <script src="script.js"></script>
+    <!-- 加载全局函数 -->
+    <script src="globals.js"></script>
+    <!-- 加载主脚本模块 -->
+    <script type="module" src="script.js"></script>
 
     <!-- 在body末尾添加通知元素 -->
     <div class="notification" id="notification">
@@ -194,10 +222,10 @@
     <footer class="text-center py-4 text-gray-400 text-xs mt-8">
         <p>
             <span class="tab-text" data-zh="版权所有" data-en="Copyright">版权所有</span> © 2025 
-            <a href="https://github.com/levywang/avhub" target="_blank" class="text-primary hover:text-primary-hover transition-colors duration-200">
+            <a href="#" target="_blank" class="text-primary hover:text-primary-hover transition-colors duration-200">
                 AvHub
             </a>
         </p>
     </footer>
 </body>
-</html>
+</html>

web/manifest.json

@@ -0,0 +1,23 @@
+{
+  "name": "AvHub",
+  "short_name": "AvHub",
+  "description": "R18 Resource Search & Manager",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#141518",
+  "theme_color": "#000000",
+  "icons": [
+    {
+      "src": "imgs/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "imgs/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ]
+} 

web/style.css

@@ -214,34 +214,53 @@ body {
     border-color: var(--primary-color);
 }
 
-.search-button, .copy-button {
+/* 搜索按钮样式 */
+.search-button {
     background: var(--primary-color);
     color: white;
     font-weight: 600;
     border-radius: 4px;
     transition: all 0.2s ease;
+    padding: 0.5rem 1rem;
+    min-width: 100px;
 }
 
-.search-button:hover, .copy-button:hover {
+.search-button:hover {
     background: var(--primary-hover);
     transform: translateY(-1px);
 }
 
-.search-button:active, .copy-button:active {
+.search-button:active {
     transform: translateY(0);
 }
 
-.copy-button {
-    background: var(--primary-color);
+/* 统一按钮样式（复制按钮和下一个按钮） */
+.next-button, .copy-button {
+    background-color: var(--primary-color);
     color: white;
     font-weight: 600;
     border-radius: 4px;
+    padding: 0.5rem 1rem;
     transition: all 0.2s ease;
+    white-space: nowrap;
+    flex-shrink: 0;
+    min-width: fit-content;
     position: relative;
     overflow: hidden;
 }
 
-.copy-button::before {
+/* 确保下一个按钮靠右 */
+.next-button {
+    margin-left: auto;
+}
+
+.next-button:hover, .copy-button:hover {
+    background: var(--primary-hover);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(27, 183, 110, 0.2);
+}
+
+.next-button::before, .copy-button::before {
     content: '';
     position: absolute;
     top: 0;
@@ -257,14 +276,40 @@ body {
     transition: 0.5s;
 }
 
-.copy-button:hover::before {
+.next-button:hover::before, .copy-button:hover::before {
     left: 100%;
 }
 
-.copy-button:hover {
-    background: var(--primary-hover);
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(27, 183, 110, 0.2);
+/* 视频控制区域样式 */
+.video-controls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+    background: rgba(0, 0, 0, 0.05);
+    margin: 1rem 0;
+    gap: 1rem;
+}
+
+/* 左侧自动播放开关组 */
+.video-controls-left {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+/* 自动播放开关容器 */
+.autoplay-toggle {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+
+/* 移除旧的margin-left设置 */
+.video-controls .autoplay-toggle + .autoplay-toggle {
+    margin-left: 0;
 }
 
 .tab-container {
@@ -331,13 +376,6 @@ body {
     background: #f59e0b;
 }
 
-/* 确保语言切换按钮与主题切换按钮大小一致 */
-#languageToggle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
 /* 修改标签颜色 */
 .tag[data-type="hd"] {
     background: rgba(59, 130, 246, 0.1);
@@ -830,58 +868,59 @@ body.light-theme select option {
     color: #ffffff;
 }
 
-/* 加载动画容器 */
+/* 修改加载容器样式 */
 .loading-container {
     display: flex;
     flex-direction: column;
     align-items: center;
+    justify-content: center;
     gap: 16px;
     padding: 32px;
+    width: 100%;
+    background: transparent;
+    box-shadow: none;
 }
 
-/* 加载动画 */
+/* 加载动画圆圈 */
 .loading-spinner {
     width: 40px;
     height: 40px;
     border: 3px solid var(--border-color);
     border-top-color: var(--primary-color);
     border-radius: 50%;
-    animation: spin 1s linear infinite;
-    transform-origin: center center;
+    animation: loading-spin 1s linear infinite;
+    margin: 0 auto;
+    display: block;
 }
 
+/* 加载动画旋转效果 */
+@keyframes loading-spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* 加载文本样式 */
 .loading-text {
     color: var(--text-secondary);
     font-size: 14px;
+    text-align: center;
+}
+
+/* 确保浅色主题下的加载状态也是完全透明的 */
+[data-theme="light"] .loading-container {
+    background: transparent;
+    box-shadow: none;
+}
+
+/* 搜索结果容器 */
+#searchResults {
     position: relative;
-    display: inline-block;
+    z-index: 1;
 }
 
-.loading-text::after {
-    content: '';
-    animation: dots 1.5s steps(4, end) infinite;
-}
-
-@keyframes dots {
-    0%, 20% { content: ''; }
-    40% { content: '.'; }
-    60% { content: '..'; }
-    80%, 100% { content: '...'; }
-}
-
-@keyframes spin {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-/* 亮色主题下的标签页容器样式 */
-[data-theme="light"] .tab-container {
-    background: #ffffff;
-    border-color: #e5e7eb;
+/* 搜索结果中的加载容器 */
+#searchResults .loading-container {
+    box-shadow: none;
 }
 
 /* Logo 样式 */
@@ -995,31 +1034,37 @@ body.light-theme select option {
     height: 20px;
 }
 
-/* 视频源地址样式 */
+/* 视频源地址容器样式 */
 .video-source {
     background: var(--bg-color);
     border: 1px solid var(--border-color);
     margin-bottom: 1rem;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap; /* 防止换行 */
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
 }
 
-.source-url {
-    color: var(--text-color);
-    padding: 0.25rem 0;
-    word-break: break-all;
+/* 视频源URL容器 */
+.video-source .flex-grow {
+    min-width: 0; /* 允许容器缩小 */
+    flex-shrink: 1; /* 允许收缩 */
 }
 
+/* 复制按钮样式 */
 .copy-button {
-    background: var(--primary-color);
-    color: var(--bg-color);
-    transition: all 0.2s;
+    flex-shrink: 0; /* 防止按钮缩小 */
+    white-space: nowrap; /* 防止文字换行 */
+    padding: 0.5rem 1rem;
+    min-width: fit-content; /* 确保按钮宽度适应内容 */
 }
 
-.copy-button:hover {
-    opacity: 0.9;
-}
-
-.copy-button.copied {
-    background: var(--success-color);
+/* 源地址URL样式 */
+.source-url {
+    text-overflow: ellipsis; /* 超出显示省略号 */
+    overflow: hidden;
+    white-space: nowrap;
 }
 
 /* 深色主题适配 */
@@ -1039,135 +1084,72 @@ body.light-theme select option {
     margin: 20px auto;
     text-align: center;
     transition: all 0.3s ease;
-    border-radius: 8px;
+    border-radius: 12px;
     overflow: hidden;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
-    cursor: pointer;
-    min-height: 300px; /* 添加最小高度 */
+    background-color: transparent; /* 移除背景色 */
 }
 
-.cover-image-container::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, 
-        rgba(255,255,255,0.1) 25%, 
-        rgba(255,255,255,0.2) 50%, 
-        rgba(255,255,255,0.1) 75%
-    );
-    animation: shimmer 1.5s infinite;
-    z-index: 1;
+/* 移除点击区域提示框样式 */
+.cover-image-container::after {
+    display: none; /* 移除提示框 */
 }
 
-@keyframes shimmer {
-    0% {
-        transform: translateX(-100%);
-    }
-    100% {
-        transform: translateX(100%);
-    }
-}
-
-.cover-image {
-    opacity: 0;
-    transition: opacity 0.3s ease, transform 0.3s ease;
-    position: relative;
-    z-index: 2;
-}
-
-.cover-image.loaded {
-    opacity: 1;
-}
-
-/* 大图预览模态框样式 */
-.image-modal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.9);
+/* 视频控制区域样式 */
+.video-controls {
     display: flex;
-    justify-content: center;
+    justify-content: space-between; /* 两端对齐 */
     align-items: center;
-    z-index: 1000;
-    opacity: 0;
-    visibility: hidden;
-    transition: all 0.3s ease;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+    background: rgba(0, 0, 0, 0.05);
+    margin: 1rem 0;
+    gap: 1rem;
 }
 
-.image-modal.active {
-    opacity: 1;
-    visibility: visible;
+/* 左侧自动播放开关组 */
+.video-controls-left {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-right: auto; /* 确保左侧元素靠左 */
 }
 
-.image-modal.hidden {
-    display: none;
+/* 自动播放开关容器 */
+.autoplay-toggle {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    flex-shrink: 0;
 }
 
-.modal-content {
-    position: relative;
-    max-width: 90%;
-    max-height: 90vh;
-}
-
-.modal-image {
-    max-width: 100%;
-    max-height: 90vh;
-    object-fit: contain;
-}
-
-.modal-close {
-    position: absolute;
-    top: -40px;
-    right: 0;
-    background: none;
-    border: none;
-    color: white;
-    cursor: pointer;
-    padding: 8px;
-    transition: transform 0.2s ease;
-}
-
-.modal-close:hover {
-    transform: scale(1.1);
-}
-
-.modal-close svg {
-    width: 24px;
-    height: 24px;
-}
-
-/* 添加键盘操作提示 */
-.modal-content::after {
-    content: 'ESC 关闭';
-    position: absolute;
-    bottom: -30px;
-    left: 50%;
-    transform: translateX(-50%);
-    color: rgba(255, 255, 255, 0.6);
-    font-size: 14px;
+/* 移除旧的margin-left设置 */
+.video-controls .autoplay-toggle + .autoplay-toggle {
+    margin-left: 0; /* 移除旧的margin设置 */
 }
 
 /* 下一个按钮样式 */
 .next-button {
-    background-color: var(--primary-color);
-    color: var(--text-color);
-    border-radius: 0.375rem;
-    font-weight: 500;
-    transition: all 0.2s;
+    margin-left: auto; /* 确保按钮靠右 */
 }
 
-.next-button:hover {
-    opacity: 0.9;
-    transform: translateY(-1px);
-}
-
-.next-button:active {
-    transform: translateY(0);
+/* 确保移动端布局正确 */
+@media (max-width: 640px) {
+    .video-controls {
+        padding: 0.5rem;
+        gap: 0.5rem;
+    }
+    
+    .video-controls-left {
+        gap: 0.5rem;
+    }
+    
+    .autoplay-toggle label {
+        font-size: 0.875rem;
+    }
+    
+    .next-button {
+        padding: 0.5rem 0.75rem;
+    }
 }
 
 /* 视频播放器容器样式 */
@@ -1239,13 +1221,6 @@ body.light-theme select option {
     border: 1px solid rgba(220, 38, 38, 0.2);
 }
 
-/* 视频控制区域样式 */
-.video-controls {
-    background: rgba(0, 0, 0, 0.05);
-    padding: 0.75rem 1rem;
-    border-radius: 0.5rem;
-}
-
 /* 自动播放开关样式 */
 .toggle-switch {
     position: relative;
@@ -1277,6 +1252,14 @@ body.light-theme select option {
     transform: translateX(20px);
 }
 
+#autoNextToggle:checked + label .toggle-switch {
+    background-color: var(--primary-color);
+}
+
+#autoNextToggle:checked + label .toggle-switch::after {
+    transform: translateX(20px);
+}
+
 /* 适配移动端全屏问题 */
 #videoPlayer::-webkit-media-controls {
     will-change: transform;
@@ -1490,3 +1473,206 @@ main {
     z-index: 50;
     margin-bottom: 60px;
 }
+
+/* 添加模态框加载指示器 */
+.modal-loading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 50px;
+    height: 50px;
+    border: 5px solid rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    border-top-color: var(--primary-color);
+    animation: spin 1s ease-in-out infinite;
+    z-index: 10;
+}
+
+@keyframes spin {
+    to { transform: translate(-50%, -50%) rotate(360deg); }
+}
+
+/* 确保模态框内容区域有相对定位 */
+.modal-content {
+    position: relative;
+    max-width: 90%;
+    max-height: 90vh;
+    min-height: 200px;
+    min-width: 200px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* 改进模态框图片加载过程 */
+.modal-image {
+    max-width: 100%;
+    max-height: 90vh;
+    object-fit: contain;
+    border-radius: 8px;
+    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    opacity: 0;
+}
+
+.image-modal.active .modal-image {
+    opacity: 1;
+    animation: zoomIn 0.3s forwards;
+}
+
+/* 添加键盘事件处理，支持ESC关闭和方向键切换图片 */
+.image-modal.active {
+    opacity: 1;
+    visibility: visible;
+}
+
+/* 添加图片加载失败时的提示 */
+.modal-image.error::before {
+    content: '图片加载失败';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: white;
+    background: rgba(0, 0, 0, 0.7);
+    padding: 10px 20px;
+    border-radius: 4px;
+    font-size: 14px;
+}
+
+/* 全宽预览图样式 */
+.fullwidth-preview {
+    width: 96vw !important;
+    max-width: 96vw !important;
+    height: auto !important;
+    max-height: 90vh !important;
+    object-fit: contain !important;
+}
+
+/* 改进模态框样式以适应全宽图片 */
+.modal-content {
+    position: relative;
+    max-width: 96vw;
+    max-height: 90vh;
+    min-height: 200px;
+    min-width: 200px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* 确保模态框内容居中 */
+.image-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.95);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+}
+
+/* 改进模态框图片加载过程 */
+.modal-image {
+    max-width: 100%;
+    max-height: 90vh;
+    object-fit: contain;
+    border-radius: 8px;
+    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    opacity: 0;
+}
+
+/* 添加图片加载错误状态 */
+.modal-image.error {
+    min-width: 300px;
+    min-height: 200px;
+    background-color: rgba(0, 0, 0, 0.3);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+
+.modal-image.error::after {
+    content: '图片加载失败';
+    position: absolute;
+    color: white;
+    font-size: 16px;
+}
+
+/* 添加提示文本 */
+.image-modal::after {
+    content: '点击任意位置关闭';
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    color: rgba(255, 255, 255, 0.6);
+    font-size: 14px;
+    padding: 8px 16px;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 4px;
+    pointer-events: none;
+}
+
+/* 热门搜索词区域样式 */
+.hot-searches {
+    padding: 8px 12px;
+    background: var(--card-dark);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    margin: 0 4px;
+}
+
+/* 热门搜索标签样式 */
+.hot-search-tag {
+    display: inline-flex;
+    align-items: center;
+    padding: 4px 12px;
+    border-radius: 16px;
+    font-size: 13px;
+    background: rgba(var(--primary-color-rgb), 0.1);
+    color: var(--primary-color);
+    cursor: pointer;
+    transition: all 0.2s;
+    border: 1px solid rgba(var(--primary-color-rgb), 0.2);
+}
+
+.hot-search-tag:hover {
+    background: rgba(var(--primary-color-rgb), 0.15);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* 热门搜索文字样式 */
+.hot-searches .label-text {
+    color: var(--text-primary);
+    font-weight: 500;
+}
+
+/* 日间主题适配 */
+[data-theme="light"] .hot-searches {
+    background: #ffffff;
+    border-color: #e5e7eb;
+}
+
+[data-theme="light"] .hot-search-tag {
+    background: rgba(var(--primary-color-rgb), 0.08);
+    border-color: rgba(var(--primary-color-rgb), 0.15);
+}
+
+[data-theme="light"] .hot-search-tag:hover {
+    background: rgba(var(--primary-color-rgb), 0.12);
+}
+
+[data-theme="light"] .hot-searches .label-text {
+    color: #374151;
+}

web/sw.js

@@ -0,0 +1,73 @@
+const CACHE_NAME = 'avhub-cache-v1';
+const urlsToCache = [
+  '/',
+  '/index.html',
+  '/style.css',
+  '/config.js',
+  '/script.js',
+  '/globals.js',
+  '/manifest.json',
+  '/imgs/favicon.ico',
+  '/imgs/icon-192x192.png',
+  '/imgs/icon-512x512.png',
+  'https://testingcf.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css',
+  'https://testingcf.jsdelivr.net/npm/hls.js@1.4.12/dist/hls.min.js'
+];
+
+// 安装 Service Worker
+self.addEventListener('install', event => {
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then(cache => cache.addAll(urlsToCache))
+  );
+});
+
+// 激活 Service Worker
+self.addEventListener('activate', event => {
+  event.waitUntil(
+    caches.keys().then(cacheNames => {
+      return Promise.all(
+        cacheNames.map(cacheName => {
+          if (cacheName !== CACHE_NAME) {
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
+});
+
+// 处理请求
+self.addEventListener('fetch', event => {
+  event.respondWith(
+    caches.match(event.request)
+      .then(response => {
+        // 如果在缓存中找到响应，则返回缓存的响应
+        if (response) {
+          return response;
+        }
+
+        // 克隆请求，因为请求是一个流，只能使用一次
+        const fetchRequest = event.request.clone();
+
+        // 发起网络请求
+        return fetch(fetchRequest).then(response => {
+          // 检查是否收到有效的响应
+          if (!response || response.status !== 200 || response.type !== 'basic') {
+            return response;
+          }
+
+          // 克隆响应，因为响应是一个流，只能使用一次
+          const responseToCache = response.clone();
+
+          // 将响应添加到缓存
+          caches.open(CACHE_NAME)
+            .then(cache => {
+              cache.put(event.request, responseToCache);
+            });
+
+          return response;
+        });
+      })
+  );
+});