// ==UserScript==
// @name        KJL后台-编缉器竖屏响应式布局切换
// @namespace   Violentmonkey Scripts
// @match       https://www.kujiale.com/vc/modeleditor/new*
// @grant       none
// @version     1.0
// @author      hejie13250
// @description 根据窗口宽高比切换页面布局 2025/2/24 08:57:06
// ==/UserScript==



(function() {
    'use strict';

    // 横屏布局样式
    const style_1 = `
      div.sidebar-container {
        width: 400px !important;
      }
      .canvas-container {
        width: calc(100% - 800px) !important;
        margin-left: 400px !important;
        margin-right: 400px !important;
      }
      .bottombar {
        border: 1px solid #e0e0e0;
      }
      .sidebar-container .move-bar,
      .sidebar-container .sidebar-fold-trigger {
        display: none;
      }
    `;

    // 竖屏布局样式
    const style_2 = `
      .canvas-container {
        width: 100% !important;
        height: calc(40% - 60px);
        margin-left: 0px !important;
        margin-right: 0px !important;
        float: left;
      }
      .sidebar-container {
        width: 400px !important;
        height: 60% !important;
        float: left;
        top: 40%;
      }
      .bottombar {
        border: 1px solid #e0e0e0;
      }
      .sidebar-container .move-bar,
      .sidebar-container .sidebar-fold-trigger,
      .topbar .topbar-left {
        display: none;
      }
    `;

    // 动态加载样式
    function loadStyle(css) {
        let style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = css;
        document.head.appendChild(style);
    }

    // 清除之前加载的样式
    function clearStyles() {
        const styles = document.querySelectorAll('style');
        styles.forEach(style => {
            if (style.innerHTML === style_1 || style.innerHTML === style_2) {
                style.remove();
            }
        });
    }

    // 获取当前应用的样式内容
    function getCurrentStyle() {
        const styles = document.querySelectorAll('style');
        for (let style of styles) {
            if (style.innerHTML === style_1 || style.innerHTML === style_2) {
                return style.innerHTML;
            }
        }
        return null;
    }

    // 检查布局并加载对应的样式
    function checkLayout() {
        const width = window.innerWidth;
        const height = window.innerHeight;

        const currentStyle = getCurrentStyle();
        const targetStyle = height > width + 500 ? style_2 : style_1;

        // 如果当前样式与目标样式不同，则更新样式
        if (currentStyle !== targetStyle) {
            clearStyles(); // 清除之前的样式
            loadStyle(targetStyle); // 加载新的样式
        }
    }

    // 防抖函数
    function debounce(func, wait) {
        let timeout;
        return function() {
            clearTimeout(timeout);
            timeout = setTimeout(func, wait);
        };
    }

    const debouncedCheckLayout = debounce(checkLayout, 100);

    // 添加窗口大小改变监听
    window.addEventListener('resize', debouncedCheckLayout);
    window.addEventListener('load', checkLayout);
})();