Halo 评论区表情框被遮挡

解决方案

网上发现没有 twikoo 的解决方案，就照着改了个 twikoo 的版本，原理是直接把表情框弹出位置改到上方，就不会再被遮挡。

在后台 设置 -> 代码注入 -> 页脚 加入以下代码：

<script>
    // Twikoo 表情面板位置修复
(function() {
    'use strict';
    
    let isInitialized = false;
    
    // Twikoo 表情面板位置修复
    function initTwikooEmojiPositionFix() {
        // 防止重复初始化
        if (isInitialized) return;
        
        const emojiButton = document.querySelector('.tk-submit-action-icon.OwO');
        
        if (!emojiButton) {
            // 如果找不到表情按钮，延迟重试
            setTimeout(initTwikooEmojiPositionFix, 1000);
            return;
        }
        
        // 添加自定义样式
        const style = document.createElement('style');
        style.textContent = `
        .OwO-body {
            position: absolute !important;
            bottom: 100% !important;
            top: auto !important;
            left: 0 !important;
            margin-bottom: 10px !important;
            z-index: 9999 !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
            border-radius: 8px !important;
        }
        
        .tk-submit-action-icon.OwO {
            position: relative !important;
        }
        
        /* 确保表情面板不会超出屏幕边界 */
        @media (max-width: 768px) {
            .OwO-body {
                left: 50% !important;
                /*transform: translateX(-50%) !important;*/
                width: 300px !important;
                max-width: 90vw !important;
            }
        }`;
        
        // 避免重复添加样式
        if (!document.querySelector('#twikoo-emoji-fix-style')) {
            style.id = 'twikoo-emoji-fix-style';
            document.head.appendChild(style);
        }
        
        // 监听表情按钮点击
        emojiButton.addEventListener('click', function(e) {
            // 延迟执行以确保面板已经显示
            setTimeout(() => {
                const emojiPanel = document.querySelector('.OwO-body');
                if (emojiPanel) {
                    // 强制应用位置样式
                    emojiPanel.style.cssText += `
                        position: absolute !important;
                        bottom: 100% !important;
                        top: auto !important;
                        left: 0 !important;
                        margin-bottom: 10px !important;
                        z-index: 9999 !important;
                    `;
                    
                    // 检查是否超出屏幕边界并调整
                    const rect = emojiPanel.getBoundingClientRect();
                    if (rect.left < 0) {
                        emojiPanel.style.left = '0px';
                    } else if (rect.right > window.innerWidth) {
                        emojiPanel.style.left = 'auto';
                        emojiPanel.style.right = '0px';
                    }
                }
            }, 100);
        });
        
        // 监听点击外部区域关闭面板时的处理
        document.addEventListener('click', function(e) {
            const emojiPanel = document.querySelector('.OwO-body');
            if (emojiPanel && !emojiButton.contains(e.target) && !emojiPanel.contains(e.target)) {
                // 面板即将关闭，可以在这里做一些清理工作
            }
        });
        
        isInitialized = true;
        console.log("Twikoo 表情位置修复脚本已初始化");
    }
    
    // 等待页面和资源完全加载
    function waitForPageLoad() {
        return new Promise((resolve) => {
            if (document.readyState === 'complete') {
                resolve();
            } else {
                window.addEventListener('load', resolve, { once: true });
            }
        });
    }
    
    // 等待 Twikoo 加载
    function waitForTwikoo() {
        return new Promise((resolve) => {
            const checkTwikoo = () => {
                if (typeof window.twikoo !== 'undefined' || document.querySelector('.twikoo')) {
                    resolve();
                } else {
                    setTimeout(checkTwikoo, 500);
                }
            };
            checkTwikoo();
        });
    }
    
    // 主初始化函数
    async function initScript() {
        try {
            // 等待页面完全加载
            await waitForPageLoad();
            
            // 等待 Twikoo 加载
            await waitForTwikoo();
            
            // 额外等待确保 DOM 稳定
            await new Promise(resolve => setTimeout(resolve, 500));
            
            // 初始化表情面板修复
            initTwikooEmojiPositionFix();
            
        } catch (error) {
            console.error('Twikoo 表情面板修复初始化失败:', error);
        }
    }
    
    // 重置初始化状态（用于 PJAX 等路由切换）
    function resetInitialization() {
        isInitialized = false;
        // 移除之前的样式
        const existingStyle = document.querySelector('#twikoo-emoji-fix-style');
        if (existingStyle) {
            existingStyle.remove();
        }
    }
    
    // 多种方式确保脚本正确初始化
    initScript();
    
    // 支持 PJAX
    document.addEventListener('pjax:complete', () => {
        resetInitialization();
        initScript();
    });
    
    // 支持其他 SPA 路由切换
    if (window.history && window.history.pushState) {
        const originalPushState = window.history.pushState;
        window.history.pushState = function() {
            originalPushState.apply(window.history, arguments);
            setTimeout(() => {
                resetInitialization();
                initScript();
            }, 100);
        };
    }
    
})();
</script>