☰

MWI公屏聊天全屏

聊天全屏 + 多栏布局 + 自动调整消息数量 + 背景颜色切换 + 全屏输入框

// ==UserScript==
// @name         MWI公屏聊天全屏
// @version      3.0
// @description  聊天全屏 + 多栏布局 + 自动调整消息数量 + 背景颜色切换 + 全屏输入框
// @match        https://www.milkywayidle.com/*
// @grant        none
// @license      MIT
// @namespace http://tampermonkey.net/
// ==/UserScript==

(function() {
    'use strict';

    // 配置常量
    const CONFIG = {
        DEFAULT_LAYOUT: 3,          // 默认三栏布局
        BG_COLORS: [
            { color: '#ffffff', name: '白色' },
            { color: '#f0fff0', name: '护眼绿' },
            { color: '#fff8e7', name: '护眼黄' },
            { color: '#e6f2ff', name: '护眼蓝' }
        ],
        SELECTORS: {
            CHAT: '[class^="ChatHistory_chatHistory"]',
            CHAT_INPUT: '.Chat_chatInput__16dhX'
        },
        MESSAGE_HEIGHT_ESTIMATE: 40, // 预估每条消息的高度（包括间距）
        PADDING: 40,                 // 容器内边距
        INPUT_BOX_HEIGHT: 60         // 输入框区域高度
    };

    // 应用状态
    const state = {
        layoutMode: CONFIG.DEFAULT_LAYOUT,
        messageCount: 0,            // 动态计算，不再固定
        fullscreenMode: false,
        bgColorIndex: 0,
        observer: null,
        allMessages: [],
        firstLoad: true,
        lastCalculatedHeight: 0,    // 记录上次计算的容器高度
        originalInput: null         // 原始输入框引用
    };

    // DOM 元素管理
    const elements = {
        buttons: {},
        chat: null,
        fullscreenInput: null,
        inputContainer: null
    };

    /**
     * 工具函数
     */
    const utils = {
        // 防抖函数
        debounce(func, wait) {
            let timeout;
            return function executedFunction(...args) {
                const later = () => {
                    clearTimeout(timeout);
                    func.apply(this, args);
                };
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
            };
        },

        // 获取聊天元素
        getChatElement() {
            return document.querySelector(CONFIG.SELECTORS.CHAT);
        },

        // 获取原始输入框
        getOriginalInput() {
            return document.querySelector(CONFIG.SELECTORS.CHAT_INPUT);
        },

        // 计算每栏可显示的消息数量
        calculateMessagesPerColumn(chat, forceRecalculate = false) {
            if (!chat) return 20; // 默认值

            const containerHeight = chat.clientHeight - CONFIG.PADDING - CONFIG.INPUT_BOX_HEIGHT;
            const columnHeight = containerHeight;

            // 如果不强制重新计算且容器高度没有变化，返回缓存结果
            if (!forceRecalculate &&
                state.lastCalculatedHeight === containerHeight &&
                state.messageCount > 0) {
                return Math.floor(state.messageCount / state.layoutMode);
            }

            // 临时显示一些消息来测量实际高度
            const testMessages = state.allMessages.slice(-Math.min(50, state.allMessages.length));

            // 先隐藏所有消息，然后显示测试消息
            state.allMessages.forEach(msg => msg.style.display = 'none');
            testMessages.forEach(msg => msg.style.display = 'block');

            // 计算平均消息高度
            let totalHeight = 0;
            let visibleCount = 0;

            testMessages.forEach(msg => {
                const rect = msg.getBoundingClientRect();
                if (rect.height > 0) {
                    totalHeight += rect.height + parseInt(getComputedStyle(msg).marginBottom || 0);
                    visibleCount++;
                }
            });

            const avgMessageHeight = visibleCount > 0 ?
                totalHeight / visibleCount :
                CONFIG.MESSAGE_HEIGHT_ESTIMATE;

            const messagesPerColumn = Math.floor(columnHeight / avgMessageHeight);
            state.lastCalculatedHeight = containerHeight;

            return Math.max(1, messagesPerColumn); // 至少显示1条消息
        },

        // 计算总消息数量
        calculateTotalMessages(chat, forceRecalculate = false) {
            const messagesPerColumn = this.calculateMessagesPerColumn(chat, forceRecalculate);
            return messagesPerColumn * state.layoutMode;
        },

        // 强制DOM回流
        forceReflow(element) {
            return element.offsetHeight;
        },

        // 创建样式字符串
        createStyleString(styles) {
            return Object.entries(styles)
                .map(([key, value]) => `${key}: ${value}`)
                .join('; ');
        },

        // 模拟按键事件
        simulateKeyPress(element, key) {
            const event = new KeyboardEvent('keydown', {
                bubbles: true,
                cancelable: true,
                key: key,
                code: key === 'Enter' ? 'Enter' : key,
                which: key === 'Enter' ? 13 : key.charCodeAt(0)
            });
            element.dispatchEvent(event);
        },

        // 模拟输入事件
        simulateInput(element, value) {
            element.value = value;
            element.dispatchEvent(new Event('input', { bubbles: true }));
        }
    };

    /**
     * 样式注入
     */
    function injectStyles() {
        if (document.getElementById('mwi-chat-styles')) return;

        const style = document.createElement('style');
        style.id = 'mwi-chat-styles';
        style.textContent = `
            /* 基础消息样式 */
            ${CONFIG.SELECTORS.CHAT} > div {
                margin-bottom: 6px;
                padding-bottom: 2px;
                font-size: 14px;
                line-height: 1.4;
                word-wrap: break-word;
                white-space: pre-wrap;
                word-break: break-word;
                user-select: text;
            }

            /* 全屏聊天样式 */
            .fullscreen-chat {
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                width: 100vw !important;
                height: calc(100vh - ${CONFIG.INPUT_BOX_HEIGHT}px) !important;
                z-index: 9998 !important;
                overflow-y: auto !important;
                padding: 20px;
                box-sizing: border-box;
                color: #333 !important;
                column-gap: 40px;
                font-size: 16px !important;
                background-color: var(--chat-bg-color, #ffffff);
            }

            .fullscreen-chat > div {
                color: #111 !important;
                break-inside: avoid;
                margin-bottom: 10px;
                transition: opacity 0.3s ease;
            }

            /* 全屏输入框容器 */
            .fullscreen-input-container {
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100vw;
                height: ${CONFIG.INPUT_BOX_HEIGHT}px;
                background-color: var(--chat-bg-color, #ffffff);
                border-top: 2px solid #ddd;
                display: flex;
                align-items: center;
                padding: 0 20px;
                box-sizing: border-box;
                z-index: 9999;
            }

            /* 全屏输入框样式 */
            .fullscreen-chat-input {
                flex: 1;
                height: 40px;
                padding: 0 15px;
                border: 1px solid #000;
                border-radius: 20px;
                font-size: 16px;
                outline: none;
                transition: border-color 0.3s ease;
                background-color: #ffffff !important;
                color: #000 !important;
                caret-color: #000 !important;
            }

            .fullscreen-chat-input:focus {
                border-color: #000;
            }

            .fullscreen-chat-input::placeholder {
                color: #666 !important;
            }

            /* 发送按钮样式 */
            .fullscreen-send-btn {
                margin-left: 10px;
                padding: 10px 20px;
                background-color: #007bff;
                color: white;
                border: none;
                border-radius: 20px;
                cursor: pointer;
                font-size: 14px;
                transition: background-color 0.3s ease;
            }

            .fullscreen-send-btn:hover {
                background-color: #0056b3;
            }

            .fullscreen-send-btn:disabled {
                background-color: #ccc;
                cursor: not-allowed;
            }

            /* 按钮基础样式 */
            .mwi-btn {
                position: fixed;
                right: 10px;
                z-index: 9999;
                padding: 10px 15px;
                border: none;
                border-radius: 8px;
                cursor: pointer;
                font-size: 14px;
                color: white;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
                transition: background-color 0.3s ease;
            }

            /* 主按钮样式 */
            #fullscreen-toggle-btn {
                top: 10px;
                background-color: #007bff;
            }

            #fullscreen-toggle-btn:hover {
                background-color: #0056b3;
            }

            /* 布局按钮样式 */
            #layout-btn {
                top: 60px;
                background-color: #6c757d;
                display: none;
            }

            #layout-btn:hover {
                background-color: #5a6268;
            }

            /* 背景颜色按钮样式 */
            #bgcolor-btn {
                top: 110px;
                background-color: #28a745;
                display: none;
            }

            #bgcolor-btn:hover {
                background-color: #218838;
            }

            /* 响应式调整 */
            @media (max-width: 768px) {
                .fullscreen-chat {
                    padding: 10px;
                    column-gap: 20px;
                }

                .mwi-btn {
                    font-size: 12px;
                    padding: 8px 12px;
                }

                .fullscreen-input-container {
                    padding: 0 10px;
                }
            }
        `;

        document.head.appendChild(style);
    }

    /**
     * 输入框管理
     */
    const inputManager = {
        // 创建全屏输入框
        createFullscreenInput() {
            if (elements.inputContainer) return;

            // 创建输入框容器
            const container = document.createElement('div');
            container.className = 'fullscreen-input-container';
            container.style.display = 'none';

            // 创建输入框
            const input = document.createElement('input');
            input.type = 'text';
            input.className = 'fullscreen-chat-input';
            input.placeholder = '输入消息...';

            // 创建发送按钮
            const sendBtn = document.createElement('button');
            sendBtn.className = 'fullscreen-send-btn';
            sendBtn.textContent = '发送';

            // 组装元素
            container.appendChild(input);
            container.appendChild(sendBtn);
            document.body.appendChild(container);

            // 保存引用
            elements.inputContainer = container;
            elements.fullscreenInput = input;

            // 绑定事件
            this.bindInputEvents(input, sendBtn);

            console.log('全屏输入框创建完成');
        },

        // 绑定输入框事件
        bindInputEvents(input, sendBtn) {
            // 回车发送
            input.addEventListener('keydown', (e) => {
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    this.sendMessage();
                }
            });

            // 按钮发送
            sendBtn.addEventListener('click', () => {
                this.sendMessage();
            });

            // 输入时更新按钮状态
            input.addEventListener('input', () => {
                sendBtn.disabled = !input.value.trim();
            });

            // 初始化按钮状态
            sendBtn.disabled = true;
        },

        // 发送消息
        sendMessage() {
            const message = elements.fullscreenInput.value.trim();
            if (!message) return;

            const originalInput = utils.getOriginalInput();
            if (!originalInput) {
                alert('❗ 找不到原始输入框，无法发送消息');
                return;
            }

            try {
                // 聚焦原始输入框
                originalInput.focus();

                // 设置输入内容
                utils.simulateInput(originalInput, message);

                // 模拟回车发送
                setTimeout(() => {
                    utils.simulateKeyPress(originalInput, 'Enter');

                    // 清空全屏输入框
                    elements.fullscreenInput.value = '';
                    elements.fullscreenInput.dispatchEvent(new Event('input', { bubbles: true }));

                    console.log('消息已发送:', message);
                }, 50);

            } catch (error) {
                console.error('发送消息失败:', error);
                alert('❗ 发送消息失败，请检查页面状态');
            }
        },

        // 显示输入框
        showInput() {
            if (elements.inputContainer) {
                elements.inputContainer.style.display = 'flex';
                // 聚焦输入框
                setTimeout(() => {
                    if (elements.fullscreenInput) {
                        elements.fullscreenInput.focus();
                    }
                }, 100);
            }
        },

        // 隐藏输入框
        hideInput() {
            if (elements.inputContainer) {
                elements.inputContainer.style.display = 'none';
                // 清空输入框
                if (elements.fullscreenInput) {
                    elements.fullscreenInput.value = '';
                }
            }
        },

        // 更新输入框背景色
        updateInputBgColor() {
            if (elements.inputContainer) {
                const currentBg = CONFIG.BG_COLORS[state.bgColorIndex];
                elements.inputContainer.style.backgroundColor = currentBg.color;
            }
        }
    };

    /**
     * 按钮创建和管理
     */
    const buttonManager = {
        // 创建主切换按钮
        createToggleButton() {
            const button = document.createElement('button');
            button.id = 'fullscreen-toggle-btn';
            button.className = 'mwi-btn';
            button.textContent = '聊天全屏';

            button.addEventListener('click', chatManager.toggleFullscreen.bind(chatManager));

            if (!document.getElementById('fullscreen-toggle-btn')) {
                document.body.appendChild(button);
                elements.buttons.toggle = button;
            }
        },

        // 创建布局切换按钮
        createLayoutButton() {
            const button = document.createElement('button');
            button.id = 'layout-btn';
            button.className = 'mwi-btn';
            button.textContent = '布局: 三栏';

            button.addEventListener('click', layoutManager.toggleLayout.bind(layoutManager));

            if (!document.getElementById('layout-btn')) {
                document.body.appendChild(button);
                elements.buttons.layout = button;
            }
        },

        // 创建背景颜色按钮
        createBgColorButton() {
            const button = document.createElement('button');
            button.id = 'bgcolor-btn';
            button.className = 'mwi-btn';
            button.textContent = '背景: 白色';

            button.addEventListener('click', backgroundManager.toggleBgColor.bind(backgroundManager));

            if (!document.getElementById('bgcolor-btn')) {
                document.body.appendChild(button);
                elements.buttons.bgcolor = button;
            }
        },

        // 更新按钮文本
        updateButtonText(buttonId, text) {
            const button = elements.buttons[buttonId] || document.getElementById(buttonId);
            if (button) {
                button.textContent = text;
            }
        },

        // 显示/隐藏辅助按钮
        toggleAuxiliaryButtons(show) {
            const buttons = ['layout-btn', 'bgcolor-btn'];
            buttons.forEach(id => {
                const button = document.getElementById(id);
                if (button) {
                    button.style.display = show ? 'block' : 'none';
                }
            });
        }
    };

    /**
     * 布局管理
     */
    const layoutManager = {
        // 切换布局模式
        toggleLayout() {
            state.layoutMode = (state.layoutMode % 3) + 1;
            this.updateLayout();
        },

        // 更新布局
        updateLayout() {
            const chat = utils.getChatElement();
            if (!chat || !chat.classList.contains('fullscreen-chat')) return;

            const layoutNames = ['一栏', '两栏', '三栏'];

            buttonManager.updateButtonText('layout', `布局: ${layoutNames[state.layoutMode - 1]}`);
            chat.style.columnCount = state.layoutMode;

            // 强制重新计算并应用消息数量
            utils.forceReflow(chat); // 确保布局更新

            // 延迟执行以确保DOM完全更新
            setTimeout(() => {
                messageManager.recalculateAndApply();
            }, 50);

            console.log(`切换到${layoutNames[state.layoutMode - 1]}布局`);
        }
    };

    /**
     * 背景管理
     */
    const backgroundManager = {
        // 切换背景颜色
        toggleBgColor() {
            state.bgColorIndex = (state.bgColorIndex + 1) % CONFIG.BG_COLORS.length;
            this.updateBgColor();
        },

        // 更新背景颜色
        updateBgColor() {
            const chat = utils.getChatElement();
            if (!chat || !chat.classList.contains('fullscreen-chat')) return;

            const currentBg = CONFIG.BG_COLORS[state.bgColorIndex];
            buttonManager.updateButtonText('bgcolor', `背景: ${currentBg.name}`);

            // 使用CSS自定义属性
            document.documentElement.style.setProperty('--chat-bg-color', currentBg.color);

            // 更新输入框背景色
            inputManager.updateInputBgColor();
        }
    };

    /**
     * 消息管理
     */
    const messageManager = {
        // 应用消息数量限制
        applyMessageLimit() {
            const chat = utils.getChatElement();
            if (!chat || state.allMessages.length === 0) return;

            // 先隐藏所有消息
            state.allMessages.forEach(msg => msg.style.display = 'none');

            // 显示最近的消息
            const recentMessages = state.allMessages.slice(-state.messageCount);
            recentMessages.forEach(msg => msg.style.display = 'block');

            console.log(`当前显示最近 ${recentMessages.length} 条消息，分 ${state.layoutMode} 栏显示`);
        },

        // 重新计算并应用消息限制（用于分栏切换）
        recalculateAndApply() {
            const chat = utils.getChatElement();
            if (!chat || !chat.classList.contains('fullscreen-chat')) return;

            // 更新消息列表
            state.allMessages = Array.from(chat.children);

            // 强制重新计算消息数量
            state.messageCount = utils.calculateTotalMessages(chat, true);

            // 应用新的消息限制
            this.applyMessageLimit();
        },

        // 设置消息观察器
        setupObserver(chat) {
            this.disconnectObserver();

            state.observer = new MutationObserver(utils.debounce((mutations) => {
                let shouldUpdate = false;

                mutations.forEach(mutation => {
                    if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                        state.allMessages = Array.from(chat.children);
                        shouldUpdate = true;
                    }
                });

                if (shouldUpdate) {
                    // 新消息到达时，使用当前的消息数量设置，不重新计算
                    this.applyMessageLimit();
                }
            }, 100));

            state.observer.observe(chat, {
                childList: true,
                subtree: false
            });
        },

        // 断开观察器
        disconnectObserver() {
            if (state.observer) {
                state.observer.disconnect();
                state.observer = null;
            }
        },

        // 重置消息显示
        resetMessageDisplay() {
            state.allMessages.forEach(msg => msg.style.display = 'block');
            state.allMessages = [];
            state.lastCalculatedHeight = 0; // 重置高度缓存
            state.messageCount = 0; // 重置消息计数
        }
    };

    /**
     * 聊天管理
     */
    const chatManager = {
        // 切换全屏模式
        toggleFullscreen() {
            const chat = utils.getChatElement();
            if (!chat) {
                alert('❗ 找不到聊天区域');
                return;
            }

            state.fullscreenMode = !chat.classList.contains('fullscreen-chat');

            if (state.fullscreenMode) {
                this.enterFullscreen(chat);
            } else {
                this.exitFullscreen(chat);
            }
        },

        // 进入全屏模式
        enterFullscreen(chat) {
            chat.classList.add('fullscreen-chat');
            buttonManager.updateButtonText('toggle', '退出全屏');
            buttonManager.toggleAuxiliaryButtons(true);

            utils.forceReflow(chat);

            // 获取所有消息
            state.allMessages = Array.from(chat.children);

            messageManager.setupObserver(chat);
            layoutManager.updateLayout();
            backgroundManager.updateBgColor();

            // 显示输入框
            inputManager.showInput();

            state.firstLoad = false;
        },

        // 退出全屏模式
        exitFullscreen(chat) {
            chat.classList.remove('fullscreen-chat');
            buttonManager.updateButtonText('toggle', '聊天全屏');
            buttonManager.toggleAuxiliaryButtons(false);

            messageManager.disconnectObserver();
            messageManager.resetMessageDisplay();

            // 隐藏输入框
            inputManager.hideInput();

            state.firstLoad = true;
        }
    };

    /**
     * 初始化管理
     */
    const initManager = {
        // 等待聊天区域加载
        waitForChat() {
            const observer = new MutationObserver((mutations, obs) => {
                const chat = utils.getChatElement();
                if (chat) {
                    this.initializePlugin();
                    obs.disconnect();
                }
            });

            observer.observe(document.body, {
                childList: true,
                subtree: true
            });

            // 设置超时，避免无限等待
            setTimeout(() => {
                observer.disconnect();
                console.warn('MWI Chat Plugin: 等待聊天区域超时');
            }, 10000);
        },

        // 初始化插件
        initializePlugin() {
            injectStyles();
            buttonManager.createToggleButton();
            buttonManager.createLayoutButton();
            buttonManager.createBgColorButton();
            inputManager.createFullscreenInput();
            this.bindEvents();

            console.log('MWI Chat Plugin: 初始化完成');
        },

        // 绑定事件
        bindEvents() {
            // 窗口大小变化事件 - 需要重新计算消息数量
            window.addEventListener('resize', utils.debounce(() => {
                const chat = utils.getChatElement();
                if (chat && chat.classList.contains('fullscreen-chat')) {
                    // 窗口大小变化时重新计算并应用
                    messageManager.recalculateAndApply();
                }
            }, 250));

            // 页面卸载清理
            window.addEventListener('beforeunload', () => {
                messageManager.disconnectObserver();
            });
        }
    };

    /**
     * 主程序入口
     */
    function main() {
        // 检查页面是否已加载
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', initManager.waitForChat.bind(initManager));
        } else {
            initManager.waitForChat();
        }
    }

    // 启动插件
    main();

})();