调整论坛布局
当前为
// ==UserScript==
// @name 远景论坛宽屏化
// @namespace http://tampermonkey.net/
// @version 1.4
// @author 宇泽同学
// @description 调整论坛布局
// @icon https://www.google.com/s2/favicons?sz=64&domain=pcbeta.com
// @license MIT
// @match https://bbs.pcbeta.com/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// 创建滑块容器
var sliderContainer = document.createElement('div');
sliderContainer.style.position = 'fixed';
sliderContainer.style.background = '#f1f1f1';
sliderContainer.style.padding = '10px';
sliderContainer.style.zIndex = '9999';
sliderContainer.style.border = '1px solid #ccc';
sliderContainer.style.borderRadius = '5px';
sliderContainer.style.width = '180px';
sliderContainer.style.userSelect = 'none';
sliderContainer.style.cursor = 'move';
sliderContainer.style.color = '#000'; // 确保文字始终为黑色
var sliderLabel = document.createElement('label');
sliderLabel.innerHTML = '页面宽度: ';
sliderContainer.appendChild(sliderLabel);
var sliderValue = document.createElement('span');
sliderValue.innerHTML = '90%';
sliderContainer.appendChild(sliderValue);
// 切换主题按钮
var themeToggleButton = document.createElement('div');
themeToggleButton.innerHTML = getMoonIcon();
themeToggleButton.style.display = 'inline';
themeToggleButton.style.marginLeft = '10px';
themeToggleButton.style.cursor = 'pointer';
themeToggleButton.style.userSelect = 'none';
themeToggleButton.style.fontSize = '13pt';
themeToggleButton.style.color = '#000'; // 确保符号始终为黑色
sliderContainer.appendChild(themeToggleButton);
var slider = document.createElement('input');
slider.type = 'range';
slider.min = '50';
slider.max = '100';
slider.value = '90';
slider.style.width = '100%';
slider.style.cursor = 'pointer';
sliderContainer.appendChild(slider);
document.body.appendChild(sliderContainer);
var hdElement = document.getElementById('hd');
var defaultLeft = 'calc(100% - 230px)'; // 180px (slider width) + 50px distance from right
var defaultTop = hdElement ? (hdElement.getBoundingClientRect().top + (hdElement.getBoundingClientRect().height / 2) - (sliderContainer.getBoundingClientRect().height / 2)) + 'px' : '80px';
sliderContainer.style.left = defaultLeft;
sliderContainer.style.top = defaultTop;
// 创建折叠图标
var toggleButton = document.createElement('div');
toggleButton.innerHTML = getRightArrowIcon(); // 初始状态为向右的箭头
toggleButton.style.position = 'absolute';
toggleButton.style.top = '5px';
toggleButton.style.right = '5px';
toggleButton.style.cursor = 'pointer';
toggleButton.style.userSelect = 'none';
toggleButton.style.fontSize = '13pt';
toggleButton.style.color = '#000'; // 确保符号始终为黑色
sliderContainer.appendChild(toggleButton);
var isCollapsed = false;
// 折叠和展开功能
toggleButton.addEventListener('click', function() {
var currentTop = sliderContainer.style.top;
var currentLeft = sliderContainer.style.left;
isCollapsed = !isCollapsed;
if (isCollapsed) {
sliderContainer.style.width = '30px';
sliderContainer.style.height = '30px'; // 设置高度为30像素
sliderLabel.style.display = 'none';
slider.style.display = 'none';
sliderValue.style.display = 'none';
themeToggleButton.style.display = 'none';
toggleButton.innerHTML = getLeftArrowIcon(); // 使用左箭头图标
toggleButton.style.top = '50%';
toggleButton.style.transform = 'translate(-50%, -50%)';
toggleButton.style.left = '50%';
// 折叠到同一行的右侧，留出一定距离
sliderContainer.style.left = 'calc(100% - 60px)';
sliderContainer.style.top = currentTop;
} else {
sliderContainer.style.width = '180px';
sliderContainer.style.height = 'auto'; // 恢复原来的高度
sliderLabel.style.display = 'inline';
slider.style.display = 'inline';
sliderValue.style.display = 'inline';
themeToggleButton.style.display = 'inline';
toggleButton.innerHTML = getRightArrowIcon(); // 使用右箭头图标
toggleButton.style.top = '5px';
toggleButton.style.right = '5px';
toggleButton.style.transform = 'none';
toggleButton.style.left = 'auto';
// 恢复到之前的位置并确保向左展开
sliderContainer.style.left = 'calc(100% - 230px)';
sliderContainer.style.top = currentTop;
}
});
// 调整页面宽度函数
function adjustWidth(percentage) {
var wpClElements = document.querySelectorAll('.wp.cl');
wpClElements.forEach(function(element) {
element.style.width = percentage + '%';
});
var clElements = document.querySelectorAll('.cl');
clElements.forEach(function(element) {
element.style.width = percentage + '%';
});
var scbarHotTdElement = document.querySelector('td.scbar_hot_td');
function adjustTdWidth() {
if (scbarHotTdElement && clElements.length > 0) {
var clRightEdge = clElements[0].offsetLeft + clElements[0].offsetWidth;
scbarHotTdElement.style.width = (clRightEdge - scbarHotTdElement.offsetLeft) + 'px';
}
}
function adjustFlBmChildren() {
var flBmElements = document.querySelectorAll('.fl.bm');
flBmElements.forEach(function(element) {
element.style.width = '100%';
element.style.boxSizing = 'border-box';
var children = element.children;
for (var i = 0; i < children.length; i++) {
children[i].style.width = '100%';
children[i].style.boxSizing = 'border-box';
}
});
}
function adjustAdditionalElements() {
var ptElement = document.querySelector('#pt.bm');
if (ptElement) {
ptElement.style.width = percentage + '%';
ptElement.style.margin = '0 auto';
}
var specificDiv = document.querySelector('div[style*="padding:0 15px;background:#fafafa;border:1px solid #ececec;"]');
if (specificDiv) {
specificDiv.style.width = percentage + '%';
specificDiv.style.margin = '0 auto';
specificDiv.style.boxSizing = 'border-box';
}
}
adjustTdWidth();
adjustFlBmChildren();
adjustAdditionalElements();
adjustScrollTopPosition();
}
// 从 localStorage 获取初始宽度值
var savedWidth = localStorage.getItem('pageWidth') || '90';
slider.value = savedWidth;
sliderValue.innerHTML = savedWidth + '%';
adjustWidth(savedWidth);
// 保存滑块值到 localStorage
slider.addEventListener('input', function() {
var value = slider.value;
sliderValue.innerHTML = value + '%';
adjustWidth(value);
localStorage.setItem('pageWidth', value);
});
var logoElement = document.querySelector('a[title="远景论坛 - 微软极客社区"]');
var scbarFormElement = document.getElementById('scbar_form');
function alignLogo() {
if (logoElement && scbarFormElement) {
var scbarFormRect = scbarFormElement.getBoundingClientRect();
logoElement.style.position = 'absolute';
logoElement.style.left = scbarFormRect.left + 'px';
}
}
function observeScbarForm() {
if (scbarFormElement) {
const observer = new MutationObserver(function() {
alignLogo();
});
observer.observe(scbarFormElement, {
attributes: true,
childList: true,
subtree: true
});
alignLogo();
}
}
observeScbarForm();
window.addEventListener('resize', function() {
alignLogo();
adjustScrollTopPosition();
});
function makeElementDraggable(element) {
var offsetX, offsetY;
var isDragging = false;
element.addEventListener('mousedown', function(e) {
if (e.target === slider || e.target === toggleButton || e.target === themeToggleButton) return;
e.preventDefault();
offsetX = e.clientX - element.getBoundingClientRect().left;
offsetY = e.clientY - element.getBoundingClientRect().top;
isDragging = true;
document.addEventListener('mousemove', moveElement);
document.addEventListener('mouseup', stopMovingElement);
});
function moveElement(e) {
if (isDragging) {
element.style.left = (e.clientX - offsetX) + 'px';
element.style.top = (e.clientY - offsetY) + 'px';
}
}
function stopMovingElement() {
isDragging = false;
document.removeEventListener('mousemove', moveElement);
document.removeEventListener('mouseup', stopMovingElement);
}
}
function adjustScrollTopPosition() {
var scrollTopElement = document.getElementById('scrolltop');
if (scrollTopElement) {
scrollTopElement.style.position = 'fixed';
scrollTopElement.style.right = '40px';
scrollTopElement.style.bottom = '40px';
scrollTopElement.style.zIndex = '1000';
}
}
makeElementDraggable(sliderContainer);
adjustScrollTopPosition();
// 主题切换功能
var isDarkMode = localStorage.getItem('isDarkMode') === 'true';
function toggleTheme() {
isDarkMode = !isDarkMode;
localStorage.setItem('isDarkMode', isDarkMode);
applyTheme();
}
function applyTheme() {
if (isDarkMode) {
document.documentElement.style.setProperty('--background-color', '#333333');
document.documentElement.style.setProperty('--text-color', '#ffffff');
document.documentElement.style.setProperty('--element-background-color', '#444444');
document.documentElement.style.setProperty('--element-border-color', '#555555');
themeToggleButton.innerHTML = getSunIcon(''); // 更改为使用SVG图标
document.body.style.backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color');
document.body.style.color = getComputedStyle(document.documentElement).getPropertyValue('--text-color');
var elements = document.querySelectorAll('div, span, p, td, th, h1, h2, h3, h4, h5, h6, a, input, label, button, select, textarea');
elements.forEach(function(element) {
element.style.backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--element-background-color');
element.style.color = getComputedStyle(document.documentElement).getPropertyValue('--text-color');
element.style.borderColor = getComputedStyle(document.documentElement).getPropertyValue('--element-border-color');
});
// 设置暗色模式下滑块组件的颜色
sliderContainer.style.backgroundColor = '#f1f1f1'; // 保持与浅色模式相同的背景颜色
// 确保滑块文字颜色为黑色
sliderLabel.style.color = '#000';
sliderValue.style.color = '#000';
slider.style.backgroundColor = ''; // 使用默认背景颜色
slider.style.borderColor = ''; // 使用默认边框颜色
// 设置暗色模式下折叠图标背景色为透明
toggleButton.style.backgroundColor = 'transparent';
// 确保文字“页面宽度: 90%”没有背景色
sliderLabel.style.backgroundColor = 'transparent';
sliderValue.style.backgroundColor = 'transparent';
themeToggleButton.style.backgroundColor = 'transparent';
} else {
removeDarkThemeStyles();
themeToggleButton.innerHTML = getMoonIcon(); // 更改为使用 SVG 图标
// 设置浅色模式下的背景颜色
sliderContainer.style.backgroundColor = '#f1f1f1'; // 设置浅色模式的背景颜色
sliderContainer.style.color = '#000'; // 确保文字颜色为黑色
slider.style.backgroundColor = ''; // 恢复默认背景颜色
sliderContainer.style.borderColor = '#b5b5b5'; // 默认边框颜色
// 设置浅色模式下折叠图标的颜色为黑色，并确保背景色为透明
toggleButton.style.color = '#000 !important';
toggleButton.style.backgroundColor = 'transparent'; // 确保背景色为透明
// 确保文字“页面宽度: 90%”没有背景色
sliderLabel.style.backgroundColor = 'transparent';
sliderValue.style.backgroundColor = 'transparent';
themeToggleButton.style.backgroundColor = 'transparent';
}
}
// 检查当前主题并应用
applyTheme();
function removeDarkThemeStyles() {
document.body.style.backgroundColor = '';
document.body.style.color = '';
var elements = document.querySelectorAll('div, span, p, td, th, h1, h2, h3, h4, h5, h6, a, input, label, button, select, textarea');
elements.forEach(function(element) {
element.style.backgroundColor = '';
element.style.color = '';
element.style.borderColor = '';
});
}
themeToggleButton.addEventListener('click', toggleTheme);
applyTheme(); // 在页面加载时应用主题
// 获取月亮图标的 SVG
function getMoonIcon() {
return `
<svg t="1726163587906" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9389" width="16" height="16">
<path d="M644.5056 70.528C834.4064 127.488 972.8 303.5648 972.8 512c0 254.4896-206.3104 460.8-460.8 460.8-222.4128 0-408.0128-157.568-451.2768-367.1296A433.4848 433.4848 0 0 0 230.4 640c240.3584 0 435.2-194.8416 435.2-435.2 0-44.2112-6.5792-86.8608-18.8416-127.0528z" p-id="9390"></path>
</svg>
`;
}
// 获取太阳图标的 SVG
function getSunIcon(color = '#000000') {
return `
<svg t="1726163798989" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14027" width="24" height="24" fill="${color}">
<path d="M550.4 842.5984V998.4h-76.8v-155.8016a336.3328 336.3328 0 0 0 76.8 0z m222.5152-123.9808l110.1824 110.1568-54.3232 54.3232-110.1568-110.1824a334.7968 334.7968 0 0 0 54.272-54.272z m-521.8304 0a334.7968 334.7968 0 0 0 54.272 54.272l-110.1312 110.208-54.3232-54.3232 110.1824-110.1568zM512 256c141.3888 0 256 114.6112 256 256s-114.6112 256-256 256-256-114.6112-256-256 114.6112-256 256-256z m486.4 217.6v76.8h-155.8016a336.3328 336.3328 0 0 0 0-76.8H998.4z m-816.9984 0a336.3328 336.3328 0 0 0 0 76.8H25.6v-76.8h155.8016z m13.824-332.6976l110.1568 110.1824a334.7968 334.7968 0 0 0-54.272 54.272L140.8768 195.2512l54.3232-54.3232z m633.5488 0l54.3232 54.3232-110.1824 110.1568a334.7968 334.7968 0 0 0-54.272-54.272l110.1312-110.208zM550.4 25.6v155.8016a336.3328 336.3328 0 0 0-76.8 0V25.6h76.8z" p-id="14028"></path>
</svg>
`;
}
// 获取左箭头图标的 SVG
function getLeftArrowIcon() {
return `
<svg t="1726165889799" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="29360" width="18" height="18">
<path d="M1009.1026963 512c0-274.57156741-222.53112889-497.1026963-497.1026963-497.1026963s-497.1026963 222.53112889-497.1026963 497.1026963 222.53112889 497.1026963 497.1026963 497.1026963 497.1026963-222.53112889 497.1026963-497.1026963z m-514.32005532 289.97657283L263.44865185 570.6425837c-32.3634568-32.3634568-32.3634568-84.7922568 0-117.15571357L494.78264098 222.02342717c8.15559111-8.15559111 18.64135111-12.16865975 29.25656494-12.16865976s21.23042765 4.01306864 29.25656494 12.16865976c16.18172839 16.18172839 16.18172839 42.46085531 0 58.64258369l-216.70570667 216.70570667c-8.02613728 8.02613728-8.02613728 21.23042765 0 29.25656494L553.42522469 743.33398914c16.18172839 16.18172839 16.18172839 42.46085531 0 58.64258369s-42.46085531 16.18172839-58.64258371 0z" fill="#515151" p-id="29361"></path>
</svg>
`;
}
// 获取右箭头图标的 SVG (镜像)
function getRightArrowIcon() {
return `
<svg t="1726165889799" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="29360" width="18" height="18" transform="scale(-1, 1)">
<path d="M1009.1026963 512c0-274.57156741-222.53112889-497.1026963-497.1026963-497.1026963s-497.1026963 222.53112889-497.1026963 497.1026963 222.53112889 497.1026963 497.1026963 497.1026963 497.1026963-222.53112889 497.1026963-497.1026963z m-514.32005532 289.97657283L263.44865185 570.6425837c-32.3634568-32.3634568-32.3634568-84.7922568 0-117.15571357L494.78264098 222.02342717c8.15559111-8.15559111 18.64135111-12.16865975 29.25656494-12.16865976s21.23042765 4.01306864 29.25656494 12.16865976c16.18172839 16.18172839 16.18172839 42.46085531 0 58.64258369l-216.70570667 216.70570667c-8.02613728 8.02613728-8.02613728 21.23042765 0 29.25656494L553.42522469 743.33398914c16.18172839 16.18172839 16.18172839 42.46085531 0 58.64258369s-42.46085531 16.18172839-58.64258371 0z" fill="#515151" p-id="29361"></path>
</svg>
`;
}
})();