Greasy Fork is available in English.
1Panel 功能增强
// ==UserScript==
// @name 1Panel 增强
// @namespace http://tampermonkey.net/
// @version 0.11
// @description 1Panel 功能增强
// @author yuyan
// @match *://*/*
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_registerMenuCommand
// @grant GM_addStyle
// @license MIT
// ==/UserScript==
(function() {
'use strict';
// 配置项
const CONFIG = {
panelUrls: GM_getValue('panelUrls', []) // 存储用户配置的面板地址数组
};
// 检查当前页面是否匹配配置的地址
function isMatchingUrl() {
if (!CONFIG.panelUrls.length) return false;
const currentUrl = window.location.host; // 获取当前域名+端口
return CONFIG.panelUrls.some(url => currentUrl.includes(url));
}
// 添加样式
GM_addStyle(`
.panel-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9998;
display: none;
}
.settings-panel {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
z-index: 9999;
min-width: 400px;
max-width: 600px;
display: none;
}
.settings-panel h2 {
margin: 0 0 20px 0;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.settings-content {
max-height: 400px;
overflow-y: auto;
padding-right: 10px;
}
.menu-item-control {
margin-bottom: 10px;
display: flex;
align-items: center;
}
.menu-item-control input[type="checkbox"] {
margin-right: 10px;
}
.panel-buttons {
margin-top: 20px;
text-align: right;
border-top: 1px solid #eee;
padding-top: 15px;
}
.panel-button {
padding: 8px 15px;
margin-left: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.save-button {
background: #409EFF;
color: white;
}
.cancel-button {
background: #909399;
color: white;
}
.url-config {
margin-bottom: 20px;
padding: 15px;
background: #f5f7fa;
border-radius: 4px;
}
.url-item {
display: flex;
gap: 10px;
margin-bottom: 10px;
}
.url-input {
flex: 1;
padding: 8px;
border: 1px solid #dcdfe6;
border-radius: 4px;
}
.remove-url {
background: #f56c6c;
color: white;
}
.add-url {
background: #67c23a;
color: white;
width: 100%;
}
.url-config p {
margin: 5px 0;
color: #909399;
font-size: 12px;
}
`);
// 等待菜单元素加载
function waitForMenu() {
return new Promise(resolve => {
const checkExist = setInterval(() => {
const menu = document.querySelector('.el-menu--vertical');
if (menu) {
clearInterval(checkExist);
resolve(menu);
}
}, 100);
});
}
// 获取菜单项文本
function getMenuItemText(element) {
const span = element.querySelector('span');
return span ? span.textContent.trim() : '';
}
// 创建菜单项控制
function createMenuItemControl(text, isVisible) {
const div = document.createElement('div');
div.className = 'menu-item-control';
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.checked = isVisible;
checkbox.dataset.menuItem = text;
const label = document.createElement('label');
label.textContent = text;
div.appendChild(checkbox);
div.appendChild(label);
return div;
}
// 创建URL配置面板
function createUrlConfigPanel() {
const overlay = document.createElement('div');
overlay.className = 'panel-overlay';
const panel = document.createElement('div');
panel.className = 'settings-panel';
panel.innerHTML = `
<h2>1Panel地址配置</h2>
<div class="url-config">
<div id="urlList">
${CONFIG.panelUrls.map((url, index) => `
<div class="url-item">
<input type="text" class="url-input" value="${url}">
<button class="panel-button remove-url" data-index="${index}">删除</button>
</div>
`).join('')}
</div>
<button class="panel-button add-url" style="margin-top: 10px;">添加地址</button>
<p>支持的格式:</p>
<p>- 域名: panel.yourdomain.com</p>
<p>- 域名带端口: panel.yourdomain.com:8888</p>
<p>- IP: 192.168.1.100</p>
<p>- IP带端口: 192.168.1.100:29758</p>
</div>
<div class="panel-buttons">
<button class="panel-button cancel-button">取消</button>
<button class="panel-button save-button">保存</button>
</div>
`;
overlay.appendChild(panel);
document.body.appendChild(overlay);
overlay.style.display = 'block';
panel.style.display = 'block';
// 添加地址按钮事件
panel.querySelector('.add-url').addEventListener('click', () => {
const urlList = panel.querySelector('#urlList');
const newUrlItem = document.createElement('div');
newUrlItem.className = 'url-item';
newUrlItem.innerHTML = `
<input type="text" class="url-input" value="">
<button class="panel-button remove-url">删除</button>
`;
urlList.appendChild(newUrlItem);
// 为新添加的删除按钮绑定事件
newUrlItem.querySelector('.remove-url').addEventListener('click', function() {
newUrlItem.remove();
});
});
// 为现有的删除按钮绑定事件
panel.querySelectorAll('.remove-url').forEach(button => {
button.addEventListener('click', function() {
this.closest('.url-item').remove();
});
});
// 保存按钮事件
panel.querySelector('.save-button').addEventListener('click', () => {
const urls = Array.from(panel.querySelectorAll('.url-input'))
.map(input => input.value.trim())
.filter(url => url !== ''); // 过滤空值
GM_setValue('panelUrls', urls);
CONFIG.panelUrls = urls;
overlay.remove();
alert('配置已保存，请刷新页面使配置生效');
});
// 取消按钮事件
panel.querySelector('.cancel-button').addEventListener('click', () => {
overlay.remove();
});
// 点击遮罩层关闭
overlay.addEventListener('click', (e) => {
if (e.target === overlay) {
overlay.remove();
}
});
return { overlay, panel };
}
// 创建设置面板HTML
function createSettingsPanel() {
const overlay = document.createElement('div');
overlay.className = 'panel-overlay';
const panel = document.createElement('div');
panel.className = 'settings-panel';
panel.innerHTML = `
<h2>菜单显示设置</h2>
<div class="settings-content"></div>
<div class="panel-buttons">
<button class="panel-button cancel-button">取消</button>
<button class="panel-button save-button">保存</button>
</div>
`;
overlay.appendChild(panel);
document.body.appendChild(overlay);
return { overlay, panel };
}
// 渲染设置面板内容
async function renderSettings() {
const menu = await waitForMenu();
const settingsContent = document.querySelector('.settings-content');
settingsContent.innerHTML = '';
const menuItems = menu.querySelectorAll('li');
menuItems.forEach(item => {
const text = getMenuItemText(item);
if (text) {
const saved = GM_getValue(text);
const isVisible = saved === undefined ? true : saved;
const control = createMenuItemControl(text, isVisible);
settingsContent.appendChild(control);
}
});
}
// 应用设置
async function applySettings() {
const menu = await waitForMenu();
const menuItems = menu.querySelectorAll('li');
menuItems.forEach(item => {
const text = getMenuItemText(item);
if (text) {
const isVisible = GM_getValue(text, true);
item.style.display = isVisible ? '' : 'none';
}
});
}
// 保存设置
function saveSettings() {
const controls = document.querySelectorAll('.menu-item-control input');
controls.forEach(checkbox => {
const text = checkbox.dataset.menuItem;
GM_setValue(text, checkbox.checked);
});
applySettings();
}
// 显示设置面板
function showSettingsPanel() {
const { overlay, panel } = createSettingsPanel();
overlay.style.display = 'block';
panel.style.display = 'block';
renderSettings();
// 注册事件处理
panel.querySelector('.save-button').addEventListener('click', () => {
saveSettings();
overlay.remove();
});
panel.querySelector('.cancel-button').addEventListener('click', () => {
overlay.remove();
});
overlay.addEventListener('click', (e) => {
if (e.target === overlay) {
overlay.remove();
}
});
}
// 初始化
function init() {
// 注册URL配置菜单
GM_registerMenuCommand('⚙️ 配置1Panel地址', createUrlConfigPanel);
// 只在匹配的URL下执行面板功能
if (isMatchingUrl()) {
// 注册菜单命令
GM_registerMenuCommand('📋 菜单显示设置', showSettingsPanel);
// 应用已保存的设置
applySettings();
}
}
// 启动脚本
init();
})();