Upload 5 files

前端页面/components/图片展示测试.js

@@ -502,8 +502,6 @@ class CyberImageViewer {
                         </svg>
                     </button>
                     <div class="cyber-keyboard-hint">
-                        <span><span class="cyber-key">←</span> ${escapeHtml(t('image.viewer.previous_short'))}</span>
-                        <span><span class="cyber-key">→</span> ${escapeHtml(t('image.viewer.next_short'))}</span>
                         <span><span class="cyber-key">ESC</span> ${escapeHtml(t('image.viewer.close_short'))}</span>
                     </div>
                 </div>
@@ -623,6 +621,8 @@ class CyberImageViewer {
             pauseIcon.style.display = 'none';
         }
         
+        btn.setAttribute('aria-label', btn.title);
+
         // 触发状态变化回调
         this._autoPlayStateChangeCallbacks.forEach(cb => cb(this._autoPlayEnabled));
     }
@@ -762,6 +762,8 @@ class CyberImageViewer {
     _bindEvents() {
         // 键盘导航
         this._keydownHandler = (e) => {
+            if (e.defaultPrevented || e.isComposing || e.keyCode === 229
+                    || e.ctrlKey || e.metaKey || e.altKey || (e.shiftKey && e.key !== 'Tab')) return;
             if (e.key === 'Tab') {
                 const controls = [...this.container.querySelectorAll('button:not([disabled]), [tabindex="0"]')];
                 if (!controls.length) { e.preventDefault(); this.container.focus(); return; }
@@ -775,22 +777,13 @@ class CyberImageViewer {
                 return;
             }
             if (e.key === 'Escape') {
+                e.preventDefault();
+                e.stopPropagation();
                 this.close();
-            } else if (e.key === 'ArrowLeft') {
-                // 键盘导航使用屏幕中心作为波浪起点
-                this._stopAutoPlay(); // 手动切换时停止自动播放
-                this.prev(window.innerWidth / 2, window.innerHeight / 2);
-            } else if (e.key === 'ArrowRight') {
-                // 键盘导航使用屏幕中心作为波浪起点
-                this._stopAutoPlay(); // 手动切换时停止自动播放
-                this.next(window.innerWidth / 2, window.innerHeight / 2);
-            } else if (e.key === ' ') {
-                // 空格键切换自动播放状态
-                e.preventDefault(); // 阻止页面滚动
-                this.toggleAutoPlay();
+
             }
         };
-        document.addEventListener('keydown', this._keydownHandler);
+        this.container.addEventListener('keydown', this._keydownHandler);
 
         // 点击导航区域 - 传递点击位置用于波浪效果
         this.elements.navLeft.addEventListener('click', (e) => {
@@ -1579,7 +1572,7 @@ class CyberImageViewer {
         this._stopAutoPlay();
         
         // 清理事件监听
-        document.removeEventListener('keydown', this._keydownHandler);
+        this.container.removeEventListener('keydown', this._keydownHandler);
 
         // 添加关闭动画
         this.container.style.opacity = '1';

前端页面/components/图片沙盒组件.js

@@ -314,28 +314,10 @@ export function setupImageSandboxEvents(detailView) {
     window.addEventListener('mouseup', handleMouseUp);
     viewport.addEventListener('mouseleave', () => { isDragging = false; viewport.style.cursor = 'grab'; });
     
-    // ⌨️ 键盘左右切换
-    const handleKeydown = (e) => {
-        if (e.key === 'ArrowLeft' && imageUrls.length > 1) {
-            loadImage(currentIndex > 0 ? currentIndex - 1 : imageUrls.length - 1);
-        } else if (e.key === 'ArrowRight' && imageUrls.length > 1) {
-            loadImage(currentIndex < imageUrls.length - 1 ? currentIndex + 1 : 0);
-        }
-    };
-    
-    // 当鼠标在视口内时启用键盘切换
-    viewport.addEventListener('mouseenter', () => {
-        document.addEventListener('keydown', handleKeydown);
-    });
-    viewport.addEventListener('mouseleave', () => {
-        document.removeEventListener('keydown', handleKeydown);
-    });
-    
     // 🔧 P3优化：注册清理函数，供组件销毁时调用
     const cleanup = () => {
         window.removeEventListener('mousemove', handleMouseMove);
         window.removeEventListener('mouseup', handleMouseUp);
-        document.removeEventListener('keydown', handleKeydown);
     };
     viewport._sandboxCleanup = cleanup;
 }

前端页面/components/用户体验_国际化.js

@@ -9,6 +9,7 @@
 //   - 默认中文
 
 let currentLang = 'zh-CN';
+let pendingLanguage = null;
 
 const translations = {
     'zh-CN': {
@@ -1259,8 +1260,8 @@ const translations = {
         'image.viewer.close': '关闭 (ESC)',
         'image.viewer.previous': '上一张 (←)',
         'image.viewer.next': '下一张 (→)',
-        'image.viewer.autoplay': '自动播放 (空格)',
-        'image.viewer.pause': '暂停自动播放 (空格)',
+        'image.viewer.autoplay': '自动播放',
+        'image.viewer.pause': '暂停自动播放',
         'image.viewer.dialog': '图片查看器',
         'image.viewer.previous_short': '上一张',
         'image.viewer.next_short': '下一张',
@@ -3058,8 +3059,8 @@ const translations = {
         'image.viewer.close': 'Close (Esc)',
         'image.viewer.previous': 'Previous image (←)',
         'image.viewer.next': 'Next image (→)',
-        'image.viewer.autoplay': 'Start slideshow (Space)',
-        'image.viewer.pause': 'Pause slideshow (Space)',
+        'image.viewer.autoplay': 'Start slideshow',
+        'image.viewer.pause': 'Pause slideshow',
         'image.viewer.dialog': 'Image viewer',
         'image.viewer.previous_short': 'Previous',
         'image.viewer.next_short': 'Next',
@@ -3434,9 +3435,13 @@ export function tIfExists(key, fallback = '') {
  * @param {string} lang - 语言代码 ('zh-CN' | 'en-US')
  */
 export function setLanguage(lang) {
-    if (translations[lang]) {
+    if (typeof lang === 'string' && Object.hasOwn(translations, lang)) {
         currentLang = lang;
-        localStorage.setItem('comfy_ranking_lang', lang);
+        pendingLanguage = lang;
+        try {
+            localStorage.setItem('comfy_ranking_lang', lang);
+            pendingLanguage = null;
+        } catch {}
         
         // 触发语言变更事件
         document.dispatchEvent(new CustomEvent('comfy-language-change', { 
@@ -3457,18 +3462,24 @@ export function getLanguage() {
  * 初始化 i18n
  */
 export function initI18n() {
+    if (pendingLanguage !== null) {
+        currentLang = pendingLanguage;
+        return;
+    }
     // 🔧 修复：优先从全局设置读取语言
     try {
         const globalSettings = JSON.parse(localStorage.getItem('ComfyCommunity_Settings') || '{}');
-        if (globalSettings.language && translations[globalSettings.language]) {
+        if (typeof globalSettings.language === 'string' && Object.hasOwn(translations, globalSettings.language)) {
             currentLang = globalSettings.language;
             return;
         }
     } catch (e) {}
     
     // 回退：从旧的独立存储读取
-    const savedLang = localStorage.getItem('comfy_ranking_lang');
-    if (savedLang && translations[savedLang]) {
+    let savedLang = null;
+    try { savedLang = localStorage.getItem('comfy_ranking_lang'); }
+    catch {}
+    if (typeof savedLang === 'string' && Object.hasOwn(translations, savedLang)) {
         currentLang = savedLang;
     } else {
         // 检测浏览器语言

前端页面/components/用户体验增强.js

@@ -218,118 +218,48 @@ export function createAutoSaver(formId, formElement, options = {}) {
 // ==========================================
 // ⌨️ P2-3: 快捷键支持
 // ==========================================
-// 特点：
-//   - Esc 关闭弹窗
-//   - Enter 确认提交
-//   - Ctrl+S 保存
-//   - 可配置扩展
-
 const keyboardShortcuts = new Map();
-let shortcutsInitialized = false;
 
-/**
- * 注册全局快捷键
- * @param {string} key - 按键组合 (如 'Escape', 'Enter', 'Ctrl+S')
- * @param {Function} handler - 处理函数
- * @param {Object} options - 配置选项
- */
+/** 仅为明确的局部容器注册按键；不接受页面全局作用域。 */
 export function registerShortcut(key, handler, options = {}) {
-    const {
-        scope = 'global',      // 作用域
-        preventDefault = true, // 是否阻止默认行为
-        description = ''       // 描述
-    } = options;
-    
-    if (!keyboardShortcuts.has(key)) {
-        keyboardShortcuts.set(key, []);
-    }
-    
-    keyboardShortcuts.get(key).push({
-        handler,
-        scope,
-        preventDefault,
-        description
-    });
+    const { scope, preventDefault = true } = options;
+    if (!scope || scope.nodeType !== 1 || scope === document.body || scope === document.documentElement
+            || typeof handler !== 'function' || typeof key !== 'string') return () => {};
+    const listener = event => {
+        if (!scope.isConnected || !scope.contains(event.target) || event.defaultPrevented
+                || event.isComposing || event.keyCode === 229 || event.repeat) return;
+        if (event.target.closest('input, textarea, select, [contenteditable]:not([contenteditable="false"])')
+                && event.key !== 'Escape') return;
+        const combo = `${event.ctrlKey || event.metaKey ? 'Ctrl+' : ''}${event.altKey ? 'Alt+' : ''}${event.shiftKey ? 'Shift+' : ''}${event.key}`;
+        if (combo !== key) return;
+        if (preventDefault) event.preventDefault();
+        event.stopPropagation();
+        handler(event);
+    };
+    const entry = { handler, scope, listener };
+    const entries = keyboardShortcuts.get(key) || [];
+    entries.push(entry);
+    keyboardShortcuts.set(key, entries);
+    scope.addEventListener('keydown', listener);
+    return () => {
+        scope.removeEventListener('keydown', listener);
+        const remaining = (keyboardShortcuts.get(key) || []).filter(item => item !== entry);
+        if (remaining.length) keyboardShortcuts.set(key, remaining);
+        else keyboardShortcuts.delete(key);
+    };
 }
 
-/**
- * 移除快捷键
- * @param {string} key - 按键组合
- * @param {Function} handler - 处理函数（可选，不传则移除所有）
- */
 export function unregisterShortcut(key, handler = null) {
-    if (handler && keyboardShortcuts.has(key)) {
-        const handlers = keyboardShortcuts.get(key);
-        const filtered = handlers.filter(h => h.handler !== handler);
-        if (filtered.length > 0) {
-            keyboardShortcuts.set(key, filtered);
-        } else {
-            keyboardShortcuts.delete(key);
-        }
-    } else {
-        keyboardShortcuts.delete(key);
+    const remaining = [];
+    for (const entry of keyboardShortcuts.get(key) || []) {
+        if (handler && entry.handler !== handler) remaining.push(entry);
+        else entry.scope.removeEventListener('keydown', entry.listener);
     }
+    if (remaining.length) keyboardShortcuts.set(key, remaining);
+    else keyboardShortcuts.delete(key);
 }
 
-/**
- * 初始化快捷键系统
- */
-export function initKeyboardShortcuts() {
-    if (shortcutsInitialized) return;
-    shortcutsInitialized = true;
-    
-    document.addEventListener('keydown', (e) => {
-        // 构建按键标识
-        let keyCombo = '';
-        if (e.ctrlKey || e.metaKey) keyCombo += 'Ctrl+';
-        if (e.altKey) keyCombo += 'Alt+';
-        if (e.shiftKey) keyCombo += 'Shift+';
-        keyCombo += e.key;
-        
-        // 也检查单独的按键
-        const keysToCheck = [keyCombo];
-        if (!e.ctrlKey && !e.altKey && !e.shiftKey) {
-            keysToCheck.push(e.key);
-        }
-        
-        for (const key of keysToCheck) {
-            if (keyboardShortcuts.has(key)) {
-                const handlers = keyboardShortcuts.get(key);
-                for (const { handler, preventDefault } of handlers) {
-                    // 跳过在输入框中的快捷键（除了 Escape）
-                    const isInput = ['INPUT', 'TEXTAREA', 'SELECT'].includes(document.activeElement?.tagName);
-                    if (isInput && key !== 'Escape') continue;
-                    
-                    if (preventDefault) {
-                        e.preventDefault();
-                    }
-                    handler(e);
-                    return;
-                }
-            }
-        }
-    });
-    
-    // 注册默认快捷键
-    _registerDefaultShortcuts();
-}
-
-function _registerDefaultShortcuts() {
-    // Esc 关闭最上层弹窗
-    registerShortcut('Escape', () => {
-        const modals = document.querySelectorAll('[data-modal="true"]');
-        if (modals.length > 0) {
-            const topModal = modals[modals.length - 1];
-            const closeBtn = topModal.querySelector('[data-close]');
-            if (closeBtn) closeBtn.click();
-        }
-    }, { description: '关闭弹窗' });
-    
-    // Ctrl+S 保存（触发自定义事件）
-    registerShortcut('Ctrl+s', () => {
-        document.dispatchEvent(new CustomEvent('comfy-save-shortcut'));
-    }, { description: '保存' });
-}
+export function initKeyboardShortcuts() {}
 
 
 // ==========================================
@@ -574,9 +504,6 @@ export function initUXEnhancements() {
     // 应用安全区域
     applySafeAreaInsets();
     
-    // 初始化快捷键
-    initKeyboardShortcuts();
-    
     // 初始化 i18n
     initI18n();
     

前端页面/components/视频播放器组件.js

@@ -2,7 +2,7 @@
 // ==========================================
 // 🎬 自定义视频播放器组件
 // ==========================================
-// 功能：内嵌视频播放 + 全屏沉浸式播放，支持自定义控制栏、键盘快捷键
+// 功能：内嵌视频播放 + 全屏沉浸式播放，支持自定义控制栏
 // 接口：getVideoPlayerHTML / setupVideoPlayerEvents / cleanupVideoPlayer / openFullscreenVideo
 // ==========================================
 
@@ -676,56 +676,6 @@ export function setupVideoPlayerEvents(container) {
         });
     }
 
-    // 8. 键盘快捷键
-    const handleKeydown = (e) => {
-        if (document.activeElement !== player) return;
-        switch (e.key) {
-            case ' ':
-            case 'k':
-                e.preventDefault();
-                togglePlay();
-                break;
-            case 'ArrowLeft':
-                e.preventDefault();
-                video.currentTime = Math.max(0, video.currentTime - 5);
-                break;
-            case 'ArrowRight':
-                e.preventDefault();
-                video.currentTime = Math.min(video.duration || 0, video.currentTime + 5);
-                break;
-            case 'ArrowUp':
-                e.preventDefault();
-                video.volume = Math.min(1, video.volume + 0.1);
-                if (video.volume > 0) video.muted = false;
-                if (volumeSlider) volumeSlider.value = Math.round(video.volume * 100);
-                updateVolumeIcon();
-                break;
-            case 'ArrowDown':
-                e.preventDefault();
-                video.volume = Math.max(0, video.volume - 0.1);
-                if (volumeSlider) volumeSlider.value = Math.round(video.volume * 100);
-                updateVolumeIcon();
-                break;
-            case 'f':
-            case 'F':
-                e.preventDefault();
-                if (btnFullscreen) btnFullscreen.click();
-                break;
-            case 'm':
-            case 'M':
-                e.preventDefault();
-                video.muted = !video.muted;
-                updateVolumeIcon();
-                break;
-        }
-    };
-    player.addEventListener('keydown', handleKeydown);
-
-    // 点击播放器获取焦点
-    player.addEventListener('click', () => {
-        player.focus();
-    });
-
     // 9. 控制栏自动隐藏
     player.addEventListener('mousemove', resetHideTimer);
     player.addEventListener('mouseenter', resetHideTimer);
@@ -897,7 +847,7 @@ export function openFullscreenVideo(videoUrl, posterUrl, options = {}) {
         if (destroyed) return;
         destroyed = true;
         if (hideControlsTimer) clearTimeout(hideControlsTimer);
-        document.removeEventListener('keydown', handleKeydown);
+        overlay.removeEventListener('keydown', handleKeydown);
         document.removeEventListener('click', handleDocClickForSpeed);
         window.removeEventListener('mousemove', handleMouseMove);
         window.removeEventListener('mouseup', handleMouseUp);
@@ -1100,53 +1050,16 @@ export function openFullscreenVideo(videoUrl, posterUrl, options = {}) {
     // 关闭按钮
     closeBtn.addEventListener('click', () => destroy(video.currentTime));
 
-    // 键盘快捷键
-    const handleKeydown = (e) => {
-        switch (e.key) {
-            case 'Escape':
-                e.preventDefault();
-                destroy(video.currentTime);
-                break;
-            case ' ':
-            case 'k':
-                e.preventDefault();
-                togglePlay();
-                break;
-            case 'ArrowLeft':
-                e.preventDefault();
-                video.currentTime = Math.max(0, video.currentTime - 5);
-                break;
-            case 'ArrowRight':
-                e.preventDefault();
-                video.currentTime = Math.min(video.duration || 0, video.currentTime + 5);
-                break;
-            case 'ArrowUp':
-                e.preventDefault();
-                video.volume = Math.min(1, video.volume + 0.1);
-                if (video.volume > 0) video.muted = false;
-                volumeSlider.value = Math.round(video.volume * 100);
-                updateVolumeIcon();
-                break;
-            case 'ArrowDown':
-                e.preventDefault();
-                video.volume = Math.max(0, video.volume - 0.1);
-                volumeSlider.value = Math.round(video.volume * 100);
-                updateVolumeIcon();
-                break;
-            case 'f':
-            case 'F':
-                e.preventDefault();
-                destroy(video.currentTime);
-                break;
-            case 'm':
-            case 'M':
-                e.preventDefault();
-                video.muted = !video.muted;
-                updateVolumeIcon();
-                break;
-        }
+    const handleKeydown = event => {
+        if (event.defaultPrevented || event.isComposing || event.keyCode === 229
+                || event.ctrlKey || event.metaKey || event.altKey || event.shiftKey
+                || event.key !== 'Escape') return;
+        event.preventDefault();
+        event.stopPropagation();
+        destroy(video.currentTime);
     };
-    document.addEventListener('keydown', handleKeydown);
+    overlay.addEventListener('keydown', handleKeydown);
+    closeBtn.focus();
 
     // 控制栏自动隐藏
     overlay.addEventListener('mousemove', resetHideTimer);