KJL后台-编缉器竖屏响应式布局切换
// ==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);
})();